Bootstrap 4 で列をレスポンシブに並べ替えるにはどうすればよいですか?

Bootstrap 4 による列の順序

レスポンシブ レイアウトの列の並べ替え

Bootstrap 4 は、異なる画面にわたって列を順序付けするための簡素化されたメカニズムサイズ。この記事では、これを実現するためのさまざまな方法について説明します。

Bootstrap 4.1

Bootstrap 4.1 でのフレックスボックスの導入により、列の順序付けがより簡単になりました。 order ユーティリティ クラスを使用して、order-1 から order-12 までの範囲で希望の列の順序を指定できるようになりました。応答性の高い順序付けは、order-md-12 order-2 などのこれらのクラスを組み合わせることによって実現できます。これにより、列が中型画面 (XXL、XL、LG、MD) では最後に配置され、極小画面 (XS) では 2 番目に配置されます。

例:

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

ブートストラップ4

Bootstrap 4.1 より前は、列の順序付けはプッシュ クラスとプル クラスに依存していました。これらのクラスは Bootstrap 4 で変更され、push-{viewport}-{units} および pull-{viewport}-{units} という構文に従います。モバイル/極小画面で目的の 1-3-2 レイアウトを実現するには、次のクラスが使用されます:

例:

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

注: このメソッドは Bootstrap 4.1 では非推奨になりました.

Flexbox Direction Utilities

order ユーティリティに加えて、Bootstrap 4.1 では、flex-column-reverse クラスと flex-md-row クラスも提供します。これらのクラスを使用すると、さまざまな画面サイズで列の方向を変更できます。たとえば、次のコードは、モバイル画面では列を垂直に配置し、中型以上の画面では列を水平に配置します:

例:

<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>

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