モバイル レイアウトを維持しながら、大きな画面で Bootstrap 3 列の順序を変更するにはどうすればよいですか?

Bootstrap 3 モバイル レイアウトで列の順序を変更する

Bootstrap 3.x を使用して、サイドバー (3) とサイドバー (3) と 2 つの列で構成されるレスポンシブ レイアウトを操作しています。内容（９）。レイアウトはデスクトップでは適切に表示されますが、

navbar
[3][9]

モバイルでは順序が変わります。

navbar
[3]
[9]

モバイルでもコンテンツを先頭にして順序を維持したいと考えています。

解決策: 列の並べ替え

列の並べ替え方法は、画面サイズによって異なります。この場合、小さい画面では順序を変更できません。ただし、大きな画面では変更できます。

ステップ 1: 列の順序を変更する

コード内の列の順序を変更します:

<!-- Main Content -->
<div>

デフォルトでは、メインコンテンツが最初に表示されます。 mobile.

ステップ 2:col-lg-push とcol-lg-pull を使用する

col-lg-push とcol-lg-pull を使用すると、並べ替えることができます大きな画面に列が表示されます。これは、大きな画面で左側にサイドバー、右側にメイン コンテンツを表示する方法です:

<!-- Main Content -->
<div>

この方法を使用すると、モバイルのレイアウトに影響を与えることなく、大きな画面で列の順序を変更できます。 .

以上がモバイル レイアウトを維持しながら、大きな画面で Bootstrap 3 列の順序を変更するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。