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

Question

不幸的是，Beta 版中的 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] 将保持在第一位且无序。使用 .order-md-12 重新排序 [column_3](对于 md-size 及以上，将排在最后)和 [column_2] .order-md-1(将排在第一位)适用于 md 尺寸及以上)

检查 jsfiddle