Bootstrap 4 で列を並べ替えるにはどうすればよいですか?

Bootstrap4 による列の並べ替え

Bootstrap4 での列の並べ替えは、要件と使用されている Bootstrap のバージョンに応じて、さまざまな手法を使用して実現できます。

ブートストラップ 4.1 (現在のバージョン)**

ブートストラップ4.1 では、新しい応答性の順序付けクラスのセット (order-first、order-last、order-0 から order-12) が導入されました。これらのクラスを使用すると、さまざまな画面サイズでの列の順序をより柔軟に制御できます。

目的のモバイル ビュー (1-3-2) で列を並べ替えるには、次のコードを使用します:

<div class="row">
  <div class="col-3 col-md-6 order-1">1</div>
  <div class="col-6 col-md-12 order-3">3</div>
  <div class="col-3 col-md-6 order-2">2</div>
</div>

Bootstrap 4 (古いバージョン)**

Bootstrap 4 の以前のバージョン (4.1 より前) では、プッシュ クラスとプル クラスは列の順序を制御するために使用されます。ただし、Bootstrap 4.0 ベータ版の時点では、これらのクラスは非推奨となり、push-{viewport}-{units} および pull-{viewport}-{units} に置き換えられました。

Pre-4.0 Beta

4.0 より前のベータ版を使用して目的のレイアウト (1-3-2) を実現するには構文:

<div class="row">
  <div class="col-xs-3 col-md-6">1</div>
  <div class="col-xs-6 col-md-12">3</div>
  <div class="col-xs-3 col-md-6 col-md-pull-0 col-xs-pull-6">2</div>
</div>

4.0 ベータ版以降

Bootstrap 4.0 ベータ版以降のバージョンでは、次の構文を使用する必要があります:

<div class="row">
  <div class="col-xs-3 col-md-6">1</div>
  <div class="col-xs-6 col-md-12">3</div>
  <div class="col-xs-3 col-md-6 push-md-0 pull-md-6">2</div>
</div>

その他アプローチ

フレックスボックス方向

Bootstrap 4.1 以降では、フレックスボックス方向ユーティリティを使用して列の順序を変更することもできます。たとえば、次のコードはモバイル画面の列の順序を逆にします。

<div class="row flex-column-reverse flex-md-row">
  <div class="col-md-8">2</div>
  <div class="col-md-4">1st on mobile</div>
</div>

折りたたみ可能な列

列を並べ替えるもう 1 つのオプションは、折りたたみ可能な列を使用することです。これにより、画面サイズに基づいて列を表示または非表示にすることができます。折りたたみ可能な列を実装するには、collapse クラスと show クラスを使用します。

Bootstrap4 による列の順序付けの詳細とデモについては、提供されているコード例とドキュメントを参照してください。

以上がBootstrap 4 で列を並べ替えるにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。