重新排序小型设备Bootstrap 4中的列

Question

不幸的是，测试版中的Bootstrap会丢弃push-*和pull-*个类，因此我不知道如何重新排序xs和sm设备中的列：

  

[column_1] [column_2] [column_3]

为：

  

[column_1] [column_3]

     

[COLUMN_2]

有什么想法吗？

Answer 1

有新的Reordering辅助类。 将div放在HTML中，您希望它们显示在移动设备中：

<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]将保持优先并且无序。将[column_3]重新排序为.order-md-12（最后是md-size及以上）和[column_2] .order-md-1（首先是md-size及以上）

检查jsfiddle