モバイル上でブートストラップ 4 Div をスタックし、デスクトップ上で並べて配置するにはどうすればよいですか?

Bootstrap 4 で div を再配置: モバイルではスタック、デスクトップでは横に並べる

モバイルで Bootstrap div を並べ替えたい場合は、それらを並べて置きます

解決策:

1. 幅を大きくするにはフレックスボックスを無効にする:
   Bootstrap 4 のフレックスボックスは列に同じ高さを割り当てます。これを防ぐには、幅が中より大きい場合はフレックスボックスを無効にします。

<div>

2. 幅が小さい場合はフロートを使用する (モバイル):
   列のフローティングを有効にして、 2 番目と 3 番目の列 (B と C) を最初の列の下に折り返す(A).

        <div>

3. 列の順序の割り当て:
   モバイル上の列の順序を変更するには、order ユーティリティ クラスを使用します。この場合、最初の列の順序を 1 (order-1) に設定し、2 番目の列の順序を 0 (order-0) に設定します。これにより、モバイルでは A が B の下に配置されますが、デスクトップでは横並びの配置が維持されます。

        <div>

このソリューションでは、列 A が全高のまま、列 B がそのまま残り、目的のレイアウトが実現されます。モバイルでは C が下に積み上げられています。

以上がモバイル上でブートストラップ 4 Div をスタックし、デスクトップ上で並べて配置するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。