Reorder columns in small devices Bootstrap 4

问题:

Unfortunately Bootstrap in Beta version drops push-* and pull-*classes, so I don't have idea how to reorder columns in xs and sm devices from:

[column_1] [column_2] [column_3]

to:

[column_1][column_3]

[column_2]

Any ideas?

回答1:

There are new Reordering helper classes. Place the divs in HTML as you want them to appear in mobile:

<div class="container">
  <div class="row">
    <div class="col-6 col-md-4">
      [column_1]
    </div>
    <div class="col-6 col-md-4 order-md-12">
      [column_3]
    </div>
    <div class="col-6 col-md-4 order-md-1">
      [column_2]
    </div>    
  </div>
</div>

[column_1] will stay first and unordered. Reorder [column_3] with .order-md-12(will be last for md-size and up) and [column_2] .order-md-1(will be first for md-size and up)

Check jsfiddle