在小型设备中对列重新排序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]

[column_2]

有什么想法吗?

推荐答案

有新的重新排序帮助器类. 要将divs放在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]将排在第一位，并且是无序的.将[column_3]重新排序为.order-md-12(在md-size和更高版本中将排在最后)和[column_2] .order-md-1(在md-size及以上是第一个)

[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屋！