提案がありますが、完璧な解決策ではないかもしれませんが、これらの 2 つの列を並べ替えるだけでよい場合に使用できます。
- 使用したコード( push )と( pull )から削除します。
- 元のコードの下にコードの別のコピーを作成します。
- ここで重要なことは、Bootstrap が提供するレスポンシブ ユーティリティを使用することです。
- この 2 つのクラス( .visible-xx )と( .hidden-xx )
と(xx : xs, sm, md, lg)を使用するだけです。
- 元のコードでそれらを使用すると、必要な解像度で必要な列を表示または非表示にできます。
例えば:
LG: ColumnA -- .visible-xx or .hidden-xx ( at the needed resolution )
ColumnB -- .visible-xx or .hidden-xx ( at the needed resolution )
次に、この 2 つのクラスを使用する必要なコードは次のようになります。
MD: ColumnB -- .visible-xx or .hidden-xx ( at the needed resolution )
ColumnA -- .visible-xx or .hidden-xx ( at the needed resolution )
** 次のように、コピー内のコードの順序を変更することを忘れないでください。
<div class="row">
<div class="">
ColumnB
</div>
<div class="">
ColumnA
</div>
重要:
修飾子クラスを使用する.col-md-push-*
ことをお勧めします。可能であれば、Bootstrap ドキュメントの列順序セクション.col-md-pull-*
を参照してください。うまくいかない場合は、別の方法を使用できます。
したがって、最初にこれを試すことができます:
<div class="row">
<div class="col-lg-9 col-lg-push-3">
Column B will be here
</div>
<div class="col-lg-3 col-lg-pull-9">
Column A will be here
</div>
</div>
これがあなたを助けることを願っています。