モバイルとデスクトップでブートストラップ列を異なる方法で並べ替えるにはどうすればよいですか?

ブートストラップで列の順序を変更したレスポンシブ レイアウト

ブートストラップを使用した Web 開発では、モバイル デバイスでは、大きな画面とは異なる列の順序を変更する必要が生じる場合があります。この質問では、列の順序をデスクトップ バージョンの 1-3-2 からモバイル バージョンの 1-2-3 に切り替える必要があるシナリオについて説明します。

Bootstrap 4 はレイアウトにフレックスボックスを採用しており、通常は次のような結果になります。列の高さを同じにします。この機能は、この場合に必要なデスクトップ レイアウトを実現する際に課題を引き起こします。これを回避するための 1 つのアプローチは、大きな画面 (LG など) でフレックスボックスを無効にし、フロートを利用して列の自然な位置合わせを可能にすることです。

このアプローチを組み込んだコード例を次に示します。

<div>

仕組み:

• 列順序は親行に相対的なため、同じ行に維持されます。
• d-flex および d-lg-block は、LG 画面以上ではフレックスボックスを無効にします。
• float-left alignsフレックスボックスが無効になっている場合、列は左に移動します。
• order-* は、モバイルでフレックスボックスが有効になっている場合に列を並べ替えます。

もう 1 つのオプションは、w-auto を伴うフレックスボックス ラッピング ハックを調査することです。ただし、上記のソリューションは、Bootstrap で目的の列順序を達成する簡単な手段を提供します。

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