デスクトップ ビューとモバイル ビューでブートストラップ列を異なる順序に並べ替えるにはどうすればよいですか?

モバイルでブートストラップ列を異なる順序で積み重ねる

ブートストラップ 4 では、デスクトップ ビューとモバイル ビューを切り替えるときに列の配置をカスタマイズするのが少し難しい場合があります。特定のシナリオに取り組んでみましょう。2 つの列と、右側の列にネストされた行があります。目標は、次のように表示されるようにレイアウトをレスポンシブにすることです:

デスクトップ バージョン:

--------- ------
|   2   ||  1  |
|       ||     |
|       |-------
|       ||  3  |
|       ||     |
|       |-------
|       |
|       |
---------

モバイル バージョン (順番に積み重ね):

--------
|  1   |
|      |
--------
|  2   |
|      |
|      |
|      |
|      |
|      |
--------
|  3   |
|      |
--------

フロートの使用と無効化Flexbox

Bootstrap 4 のデフォルトのフレックスボックス レイアウトでは、列の高さが均等になります。目的のデスクトップ レイアウトを実現するには、大画面のフレックスボックスを無効にし、代わりにフロートを使用します。

<div class="container">
    <div class="row d-flex d-lg-block">
         <div class="col-lg-8 order-1 float-left">
            <div class="card card-body tall">2</div>
        </div>
        <div class="col-lg-4 order-0 float-left">
            <div class="card card-body">1</div>
        </div>
        <div class="col-lg-4 order-1 float-left">
            <div class="card card-body">3</div>
        </div>
    </div>
</div>

フレックスボックス ラッピング ハックの使用

あるいは、w を利用するフレックスボックス ラッピング ハックを採用することもできます。 -auto:

<div class="container">
    <div class="row">
         <div class="col-lg-8 order-1">
            <div class="card card-body">2</div>
        </div>
        <div class="col-lg-4 order-0">
            <div class="card card-body w-auto">1</div>
        </div>
        <div class="col-lg-4 order-1">
            <div class="card card-body w-auto">3</div>
        </div>
    </div>
</div>

考慮事項

両方アプローチにはそれぞれ長所と短所があります。 float メソッドはより簡単ですが、位置合わせと応答性に問題が発生する可能性があります。ラッピング ハックにより応答性は向上しますが、より複雑な CSS が必要になります。

追加リソース

• [ブートストラップ 4 で予期しない列の順序を修正するには?](...)
• [ブートストラップ応答列の高さ](...)
• B-A-C -> A-B-C

以上がデスクトップ ビューとモバイル ビューでブートストラップ列を異なる順序に並べ替えるにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。