bootstrap4.css
.order-1 {
-ms-flex-order: 1;
order: 1;
}
bootstrap4.css
.order-10 {
-ms-flex-order: 10;
order: 10;
}
bootstrap4.css
.order-11 {
-ms-flex-order: 11;
order: 11;
}
bootstrap4.css
.order-12 {
-ms-flex-order: 12;
order: 12;
}
■レイアウト:rowとcol:コンテンツの並べ替え:order-1~order-12
第1のカラム(順序指定なし)
第2のカラム(順序指定は12)
第3のカラム(順序指定は1)
<div class="row">
<div class="col">第1のカラム(順序指定なし)</div>
<div class="col order-12">第2のカラム(順序指定は12)</div>
<div class="col order-1">第3のカラム(順序指定は1)</div>
</div>
■レイアウト: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>