デスクトップ上で 2 つの短い Div の隣に背の高い Div を配置し、モバイルでスタックする方法

デスクトップ上で 2 つの短い Div の隣に背の高い Div が 1 つあり、モバイル上で積み重ねられている

問題:

レイアウトを達成するモバイル デバイスでは 3 つの div が重ねて表示されますが、大きな画面では並べて表示されます(デスクトップ).

解決策:

この解決策には、幅の広い画面でフレックスボックスの動作を無効にし、float を使用して短い div (B および C) を自然に揃えることが含まれます。右。モバイルでは、フレックスボックスの順序プロパティを使用して、次のように div を並べ替えます:

• デスクトップ: A-B-C
• モバイル: B-A-C

コード:

<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>

以上がデスクトップ上で 2 つの短い Div の隣に背の高い Div を配置し、モバイルでスタックする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。