モバイルで Bootstrap 3 の列の順序を変更するにはどうすればよいですか?

モバイル レイアウトで Bootstrap 3 の列の順序を並べ替える方法

Bootstrap 3 を使用してレスポンシブ レイアウトを作成する場合、順序が変更される状況が発生することがあります。デスクトップからモバイルビューに移行すると、列の数が変更されます。この問題に対処し、メイン コンテンツがモバイル デバイスの上部に表示されるようにするには、次の手順に従います。

1.列の順序を反転します:

デスクトップ ビューで標準の列順序 (左側にサイドバー、右側にコンテンツ) を使用する代わりに、モバイル ビューで順序を切り替えます。例:

<div class="row">
  <div class="col-md-9 col-xs-12">
    <!-- Main content -->
  </div>
  <div class="col-md-3 col-xs-12">
    <!-- Sidebar -->
  </div>
</div>

2.プッシュ クラスとプル クラスを使用します:

デスクトップ ビューで、col-lg-push とcol-lg-pull を使用して、メイン コンテンツを右側にプッシュし、サイドバーを左側に効果的にプルします。順序を入れ替えます。

<div class="row">
  <div class="col-lg-9 col-lg-push-3">
    <!-- Main content -->
  </div>
  <div class="col-lg-3 col-lg-pull-9">
    <!-- Sidebar -->
  </div>
</div>

3.列の順序を逆にする:

または、HTML の列の順序を逆にして、メイン コンテンツが最初に来るようにすることもできます:

<div class="row">
  <div class="col-md-9 col-xs-12">
    <!-- Main content -->
  </div>
  <div class="col-md-3 col-xs-12">
    <!-- Sidebar -->
  </div>
</div>

次の手順に従います。を使用すると、Bootstrap 3 のモバイル ビューで列を効果的に並べ替えることができ、目的のコンテンツ階層を確保できます。

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