对小型设备中的列重新排序 Bootstrap 4 [英] Reorder columns in small devices Bootstrap 4

问题描述

不幸的是，Beta 版中的 Bootstrap 删除了 push-* 和 pull-* 类，所以我不知道如何从以下位置重新排序 xs 和 sm 设备中的列:

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]

[column_1] [column_2] [column_3]

到:

[column_1][column_3]

[column_1][column_3]

[column_2]

有什么想法吗?

推荐答案

有新的重新排序帮助类.将 div 放置在 HTML 中，就像您希望它们出现在移动设备中一样:

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

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

检查 jsfiddle

这篇关于对小型设备中的列重新排序 Bootstrap 4的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！