Bootstrap の `col-lg-push` クラスと `col-lg-pull` クラスはどのようにして列の順序を操作できるのでしょうか?

Bootstrap のグリッド順序付けを使用した列順序の操作

Bootstrap のグリッド システムを使用すると、列のレイアウトと順序を正確に制御できます。 Col-lg-push クラスとcol-lg-pull クラスを使用すると、デスクトップ ビューポート (>= lg) 上の行内の特定の位置に列をプッシュまたはプルできます。

col-lg-pull クラスの使用方法lg-push およびcol-lg-pull

列をプッシュまたはプルするには、列の後に希望の番号を指定します。 Col-lg-push またはcol-lg-pull。たとえば、col-lg-pull-5 は、デフォルトの位置から 5 列左に列をプルします。

例: モバイルとデスクトップの列の並べ替え

あなたが提供した例を見てみましょう:

[5] [5] [2]  (Desktop)

[5] (second)
[5] (first)
[2]  (Mobile)

Bootstrap のグリッド順序を使用してこのレイアウトを実現するには、次のコードを使用します:

<div>
<p><strong>説明:</strong></p>
<p>デスクトップ ビューポート (>= lg) では、HTML 内の列の順序によってレイアウトが決まります。 。したがって、コンテンツ B は 5 列右に移動され、コンテンツ A の後に配置されます。モバイル ビューポート (</p>
<p><strong>重要な注意事項:</strong></p>
<ul>
<li>col-lg-push クラスとcol-lg-pull クラスは、次の列にのみ影響します。大きな (デスクトップ) ビューポート。</li>
<li>HTML 内の列の順序は、目的のモバイル レイアウトを反映する必要があります。</li>
<li>Bootstrap 4 では、フレックスボックス ベースのグリッド システムが導入され、.order-* クラスが導入されました。より柔軟な列の順序付けのため。</li>
</ul>
</div>

以上がBootstrap の `col-lg-push` クラスと `col-lg-pull` クラスはどのようにして列の順序を操作できるのでしょうか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。