Bootstrap4のグリッドレイアウトの説明は長いので並べ替えも別ページに。
Bootsatrap4からはFlexboxを利用した列の順序変更が出来るようになりました。（記述したソースの順番ではなく表示の順番の設定ができるように）
また、これまでにもあった途中で空欄を設けるオフセットなどの情報を記載しています。
列の順序変更（Order classes）
列全体の垂直方向の配置
.order- クラスを使用して、コンテンツの視覚的順序を制御できます。各ブレークポイントで order を設定することが可能です。（例、.order-1.order-md-2のように）
グリッドの数と同じ1〜12までがサポートされています。
Bootstrap3で使用されていたpush/pullクラスのスタイルが廃止されて.orderクラスを新たに使用する形になったようです。
列の順序変更使用例
html
<div class
="container">
<h3>1番目に記述した列に.oreder-3、2番目に記述した列に.oreder-1、3番目に記述した列に.oreder-2を設定した例</h3>
<div class="row">
<div class="col order-3">
1番目に記述<br>
.order-3
</div>
<div class="col order-1">
2番目に記述<br>
.order-1
</div>
<div class="col order-2">
3番目に記述<br>
.order-2
</div>
</div>
<h3>.order-クラス指定なし、.order-クラス指定ありを混在させた例</h3>
<div class="row">
<div class="col">
1番目に記述<br>
.order-指定なし
</div>
<div class="col order-2">
2番目に記述<br>
.order-2
</div>
<div class="col">
3番目に記述<br>
.order-指定なし
</div>
<div class="col order-1">
4番目に記述<br>
.order-1
</div>
</div>
まず、最初の例は全ての列に.order-クラスを設定した場合は、.order-数字の数字が小さい順から表示されます。
続いて2番目の.order-クラスの指定ありと指定なしが混在した場合は、指定なしの列が順番にまず表示され、その後に.order-数字の数字が小さい順から表示されます。
.order-firstクラス
.order-数字とは別に.order-firstというクラスが用意されています。
.order-firstクラスは、order：-1が設定されており上記の.order-クラスの指定ありや指定なし関係なく.order-firstクラスを設定した列が最初に表示されます。
flexboxでは-1以下の設定もできますが、Bootstrap4では、−1以下のクラスは用意されていないようです。
html
<h3>.order-firstを使用した例</h3>
<div class="row">
<div class="col">
1番目に記述<br>
.order-指定なし
</div>
<div class="col order-2">
2番目に記述<br>
.order-2
</div>
<div class="col">
3番目に記述<br>
.order-指定なし
</div>
<div class="col order-first">
4番目に記述<br>
.order-first
</div>
</div>
</div>
See the Pen Bootstarap4 列の順序変更（Order classes）.order-firstクラス by niwaka-web (@niwaka-web) on CodePen.
オフセットカラム（Offsetting columns）
オフセットの訳が難しいですが、列の途中に空欄を設けることができるということです。
.offset-グリッドクラスかマージンユーティリティの二つの方法でオフセットが可能です。
オフセットクラス（Offset classes）
.offset-{breakpoint}-数字を指定すると左側に空欄を設けることができます。（例：.offset-md-4）
入れる数字は空白を入れたいグリッドカラムの数になります。
html
<div class="container">
<h3>2列目に.offset-クラスを設定した例</h3>
<div class="row">
<div class="col-md-4">1列目<br>.col-md-4</div>
<div class="col-md-4 offset-md-4">2列目<br>.col-md-4 .offset-md-4</div>
</div>
</div>
<div class="container">
<h3>1,2列目ともに.offset-クラスを設定した例</h3>
<div class="row">
<div class="col-md-3 offset-md-3">1列目<br>col-md-3 .offset-md-3</div>
<div class="col-md-3 offset-md-3">2列目<br>.col-md-3 .offset-md-3</div>
</div>
</div>
<div class="container">
<h3>1列目に.offset-クラスを設定した例</h3>
<div class="row">
<div class="col-md-6 offset-md-3">1列目<br>.col-md-6 .offset-md-3</div>
</div>
</div>
ブレイクポイント毎にオフセットクラスを使用した例
html
<div class="container">
<h3>sm（小サイズ）では列の間に空欄を設け、<br>md（中サイズ)では空欄をなくした例</h3>
<div class="row">
<div class="col-sm-5 col-md-6">1列目<br>
.col-sm-5 .col-md-6</div>
<div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">2列目<br>.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0</div>
</div>
<h3>smd（中サイズ)では列の間に空欄を設け、<br>lg（大サイズ)では空欄をなくした例</h3>
<div class="row">
<div class="col-sm-6 col-md-5 col-lg-6">1列目<br>.col-sm-6 .col-md-5 .col-lg-6</div>
<div class="col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0">2列目<br>.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0</div>
</div>
</div>
マージンユーティリティ（Margin utilities）
Bootstrap4でflexboxへ移行されたことにより、.mr-auto のようなmarginユーティリティを使用して、兄弟列の間をを互いに空けることができるようになりました。
マージンユーティリティで用意されているクラスもブレイクポイントごとに用意されているのでm-ブレイクポイント-autoと設定することもできます。
html
<div class="container">
<h3>2列目に.ml-autoを設定した例</h3>
<div class="row">
<div class="col-sm-4">1列目<br>.col-sm-4</div>
<div class="col-sm-4 ml-auto">2列目<br>.col-sm-4 .ml-auto</div>
</div>
<h3>1列目、2列目共に.ml-md-autoを設定した例（カラムはsm設定）</h3>
<div class="row">
<div class="col-sm-3 ml-md-auto">1列目<br>.col-sm-3 .ml-md-auto</div>
<div class="col-sm-3 ml-md-auto">2列目<br>.col-sm-3 .ml-md-auto</div>
</div>
<h3>1列目に.mr-autoを設定した例</h3>
<div class="row">
<div class="col-auto mr-auto">1列目<br>.col-auto .mr-auto</div>
<div class="col-auto">3列目<br>.col-auto</div>
</div>
</div>
参照ページ
記事にする際に参考にさせていただいたページ。
