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

Bootstrap 4 による列の再編成

Bootstrap 4 では、目的の効果や画面サイズに応じて、さまざまな方法を使用して列を並べ替えることができます。 .

ブートストラップ 5 の場合(2021)

Bootstrap 5 以降、レスポンシブな順序付けクラスが更新され、order-first、order-last、order-0 から order-5 が含まれるようになりました。これらのクラスにより、列の配置をより柔軟に行うことができます。

Bootstrap 4 (2018) の場合

Bootstrap 4 では、応答性の高い順序付けクラスには order-first、order-last が含まれます。 、および order-0 から order-12 まで。モバイルで目的の 1-3-2 レイアウトを実現するには、次のクラスを使用する必要があります。

<div class="container">
  <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>
</div>

Flexbox によるカスタマイズ

Flexbox はブートストラップでネイティブにサポートされています。 4.1以降。これにより、方向ユーティリティを使用して列の順序をさらに制御できるようになります。

<div class="container">
  <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>
</div>

これらのオプションを使用すると、Bootstrap は、画面サイズと目的のレイアウトに基づいて列を再編成するための十分な柔軟性を提供します。

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