Bootstrap 4 および 5 で列を効果的に順序付けるにはどうすればよいですか?

Bootstrap 4 による列の順序付け

Bootstrap 4 では、クラスとフレックスボックスの組み合わせを使用して列の順序付けを実現できます。モバイル画面で目的の 1-3-2 レイアウトを取得するには、次のテクニックを検討します。

2021 - Bootstrap 5

Bootstrap 5 では、次の新しいクラスが導入されました。レスポンシブな順序付け: order-first、order-last、order-0 から order-5。これにより、列の順序が簡素化され、ビューポート サイズごとに希望の順序を設定できるようになります。

2018 - Bootstrap 4

Pre-4.0 Beta:

Bootstrap 4.0 ベータ以前のプッシュ クラスとプル クラスの形式は次のとおりでした。 Push-{viewport}-{units} および pull-{viewport}-{units} (xs- infix なし)。モバイルで 1-3-2 レイアウトを実現するには、次のようなクラスを使用します。

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

Bootstrap 4.1 以降

Bootstrap 4.1 では、フレックスボックスが導入されました。列を並べ替えるより直感的な方法です。応答順序付けクラスの範囲は、order-1 から order-12 までです。これらのクラスを設定することで、クラスの順序付けに加えて、親 .row:

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

Flexbox 方向を使用した順序の変更

に対する列の順序を指定できます。 、Bootstrap 4.1 では、フレックスボックス方向ユーティリティを使用して列の順序を逆転することもできます:

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

以上がBootstrap 4 および 5 で列を効果的に順序付けるにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。