Bootstrap 4 を使用して、デスクトップ上で 1 つの高い Div を 2 つの短い Div の隣に配置し、モバイル上でスタックする方法は?

デスクトップでは 2 つの短い Div の隣に 1 つの高い Div があり、Bootstrap 4 を使用してモバイルではスタックされています

問題の理解:

参照された質問と同様に、このシナリオには、から切り替えるときに 3 つの div を並べ替える必要があります。デスクトップからモバイルへ。デスクトップでは、これらの div は横に並べて配置する必要がありますが、モバイルでは垂直に積み重ねる必要があります。提供された画像は、目的のレイアウトを明確に示しています。

解決策への取り組み:

このレイアウトを実現するには、幅が大きい場合は Bootstrap 4 のデフォルトのフレックスボックス動作を無効にする必要があります。こうすることで、列の高さの制限がなくなります。代わりに、float プロパティを使用して、A の方が高いため、B 列と C 列を自然に右に揃えることができます。

順序の実装:

順序を変更するにはモバイル上の列では、Bootstrap 4 によって提供される order-utility クラスを利用します:

• Desktop (幅を大きくする): 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>

このソリューションは、意図したとおりに div を効果的に並べ替えます。デスクトップとモバイルデバイスの両方で特定のレイアウトを提供します。

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