モバイルのレスポンシブ ブートストラップでカスタム列の順序を実現するにはどうすればよいですか?

モバイルでのレスポンシブ ブートストラップ列の順序

レスポンシブ レイアウトを設計する場合、さまざまな画面サイズで望ましい列の順序を確保するのは困難な場合があります。この質問は、大きな画面と比較してモバイル デバイスでネストされた列レイアウトの配置が異なる特定のケースに対処します。

問題:

開発者は 2 つの列を含むレイアウトを持っています。そして右側の列内のネストされた行。目標は、モバイルで次の順序で列を表示することです:

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

ただし、現在のコードでは、モバイルでは 1-3-2 という誤った順序になります。

解決策:

この解決策には、画面サイズを大きくするにはフレックスボックスを無効にし、モバイルで目的のレイアウトを実現するためにフロートを使用することが含まれます。次のコードは、このアプローチを示しています。

<div>
<p><strong>仕組み:</strong></p>
<ul>
<li>
<strong>大きな画面での Flexbox の無効化:</strong> flex d-lg-block ユーティリティ クラスは、lg より小さい画面ではフレックスボックスを有効にしますが、lg 以上では無効にします。</li>
<li>
<strong>モバイル用の Float の使用:</strong> フレックスボックスが無効になっている場合、float-left ユーティリティは</li>
<li>
<strong>order-* による並べ替え:</strong> モバイル (フレックスボックスが有効な場合) では、order-* ユーティリティ クラスを使用して列を並べ替えます。 </li>
</ul>
<p><strong>代替解決策:</strong></p>
<p>提供された回答で述べたように、別の潜在的な解決策には、w-auto を使用したフレックスボックス ラッピング ハックが含まれます。このアプローチには、列に自動幅を設定して、モバイル上で列を次の行に折り返せるようにすることが含まれます。ただし、このハッキングは、標準のブートストラップ ユーティリティに依存する最初のソリューションほど信頼性が低い可能性があることに注意することが重要です。</p>
</div>

以上がモバイルのレスポンシブ ブートストラップでカスタム列の順序を実現するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。