[How To] col-md-push in Bootstrap 4; How to Space Columns

Bootstrap 4 has a totally different grid structure from BS3. Most of the Bs3 users may be confused when they see there is no col-md-push class for spacing column elements in Bootstrap 4. Fear not, however we’ve got you covered. Here is the BS4 alternative way of pushing and pulling columns:
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-md-4"</span><span class="nt">></span>.col-md-4<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-md-4 offset-md-4"</span><span class="nt">></span>.col-md-4 .offset-md-4<span class="nt"></div></span>
<span class="nt"></div></span>
If you would like to change the order of the columns for certain displays, you can use the order class set for this purpose. See it in the example below:
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"container"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col"</span><span class="nt">></span>
First, but unordered
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col order-12"</span><span class="nt">></span>
Second, but last
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col order-1"</span><span class="nt">></span>
Third, but first
<span class="nt"></div></span>
<span class="nt"></div></span>
<span class="nt"></div></span>