Bootstrap 4 Div を並べ替える方法: デスクトップでは並べて、モバイルではスタック?

Bootstrap 4 を使用した Div の並べ替え: デスクトップ上では背の高い Div が短い Div に隣接し、モバイルではスタックされます

Web ページ。デスクトップ デバイスでは並べて表示し、モバイルでは重ねて表示します。 devices.

これを実現するには、Bootstrap 4 のフレックスボックスの動作をオーバーライドする必要があります。これにより、列の高さが同じになります。幅を大きくするには、フレックスボックスを無効にする必要があります。次に、float を使用して、最初の列 (A) の方が高いことを考慮して、2 番目と 3 番目の列 (B と C) が自然に右に移動するようにすることができます。

モバイル デバイスで並べ替えを完了するには、次のようにします。フレックスボックスの order- プロパティを利用します。これにより、列が希望の順序で表示されるようになります。

コード スニペット:

<div class="container-fluid">
    <div class="row d-flex d-lg-block">
         <div class="col-lg-6 order-1 float-left">
            A
        </div>
        <div class="col-lg-6 order-0 float-left">
            B
        </div>
        <div class="col-lg-6 order-1 float-left">
            C
        </div>
    </div>
</div>

この例では、order-1 および float-left CSS クラスデスクトップデバイス上で希望の配置を確保します。モバイル デバイスでは、d-flex クラスが無効になり、3 つの div を垂直に積み重ねることができます。

以上がBootstrap 4 Div を並べ替える方法: デスクトップでは並べて、モバイルではスタック?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。