[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:

<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
</div>

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:

<div class="container">
  <div class="row">
    <div class="col">
      First, but unordered
    </div>
    <div class="col order-12">
      Second, but last
    </div>
    <div class="col order-1">
      Third, but first
    </div>
  </div>
</div>