bootstrap4.css
.order-2 {
  -ms-flex-order: 2;
  order: 2;
}
■レイアウト：Flex d-flex：ユーティリティ：特定のflex文字の表示順序を入れ替えるクラス
flex文字01
flex文字02
flex文字03
  <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>
■メディアオブジェクト：media：メディアオブジェクト：並べ替え order
タイトル
HTMLの構造上、画像を先に、メディア本文を後に記述していますが、order-*クラスを使用して表示上の順序を入れ替えています。 
  <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>