モバイル レイアウトでブートストラップ 3 列の順序を逆にするにはどうすればよいですか?

モバイル レイアウトでのブートストラップ 3 列の並べ替え

レスポンシブ レイアウトを設計する場合、小さな画面で列の順序を調整することが必要になることがよくあります。この記事では、Bootstrap 3 モバイル レイアウトで列の順序を変更するという特定の問題について説明します。この問題では、現在サイドバー列がメイン コンテンツ列の上に重なっています。

問題:

ナビゲーションバー、サイドバー、メインコンテンツを備えたレスポンシブレイアウトを使用しています。デスクトップでは、レイアウトは次のように表示されます:

navbar
[3][9]

ただし、モバイルでは、レイアウトは次のように変わります:

navbar
[3]
[9]

モバイルでは順序を逆にしたいと思います:

navbar
[9]
[3]

解決策:

それは不可能ですが、 Bootstrap の組み込みグリッド システムを使用してモバイルで列の順序を直接変更するには、回避策があります。 HTML コード内の列の順序を逆にすることで、さまざまな画面サイズで列がどのように表示されるかを操作できます。

この場合、次のようになります。

<div>
<p>順序を逆にするにはモバイルの場合は、次のように変更します。</p>
<pre class="brush:php;toolbar:false"><div>
<p>デフォルトでは、モバイル デバイスでもメイン コンテンツが最初に表示されます。 Col-lg-push クラスとcol-lg-pull クラスは、より大きな画面サイズで列の順序を変更するために使用され、サイドバーが左側に残り、メイン コンテンツが右側に残るようにします。</p>
<p><strong>注:</strong> このソリューションは、大きな画面サイズ (ラップトップなど) でのみ機能します。小さい画面でも、列はブートストラップの意図どおりにスタックされます。</p>
</div>