order-1

bootstrap5.css

.order-1 {
  -ms-flex-order: 1;
  order: 1;
}

bootstrap5.css

.order-10 {
  -ms-flex-order: 10;
  order: 10;
}

bootstrap5.css

.order-11 {
  -ms-flex-order: 11;
  order: 11;
}

bootstrap5.css

.order-12 {
  -ms-flex-order: 12;
  order: 12;
}

html bootstrap5 Sample

コンテンツの並べ替え：order-1～order-12

第1のカラム（順序指定なし）

第2のカラム（順序指定は12）

第3のカラム（順序指定は1）

  <div class="row">
    <!-- orderの数字の小さい順に並ぶ、プログラムでhtmlを書くときは便利 -->
    <div class="col">第1のカラム（順序指定なし）</div>
    <div class="col order-12">第2のカラム（順序指定は12）</div>
    <div class="col order-1">第3のカラム（順序指定は1）</div>
  </div>

特定のflex文字の表示順序を入れ替えるクラス：order

flex文字01

flex文字02

flex文字03

  <!-- htmlの書いた順ではなく、orderの数値123順に並ぶ -->
  <div class="d-flex">
    <div class="order-1">flex文字01</div>
    <div class="order-3">flex文字02</div>
    <div class="order-2">flex文字03</div>
  </div>

メディアオブジェクト画像の配置を変える：order-*

タイトル

HTMLの構造上、画像を先に、メディア本文を後に記述していますが、order-*クラスを使用して表示上の順序を入れ替えています。

  <!-- order-1とorder-2を使う -->
  <div class="media">
    <img class="order-2 ml-3" alt="" src="https://via.placeholder.com/60x60/FFFF00/000000?text=img">
    <div class="media-body order-1">
      <h5>タイトル</h5>
      HTMLの構造上、画像を先に、メディア本文を後に記述していますが、order-*クラスを使用して表示上の順序を入れ替えています。
    </div>
  </div>