通过Bootstrap4订购列 [英] Order columns through Bootstrap4

问题描述

我想在台式机和移动设备上以不同的方式订购3列. 目前，我的围裙看起来像这样:

I have 3 columns which I want to order in different ways on desktop and mobile. Currently, my gird looks like this:

<div class="row">
  <div class="col-xs-3 col-md-6">
    1
  </div>
  <div class="col-xs-3 col-md-6">
    2
  </div>
  <div class="col-xs-6 col-md-12">
    3
  </div>
</div>

在移动视图中，我想要以下输出:

In the mobile view I want to have the following output:

1-3-2

不幸的是，我不知道如何使用Bootstrap 4中的.col-md-push-*和.col-md-pull-*类来解决这个问题.

Unfortunately I don't get how to solve this with the .col-md-push-* and .col-md-pull-* classes in Bootstrap 4.

推荐答案

2018-使用最新的Bootstrap 4重新讨论此问题.

响应性排序类现在为order-first，order-last和order-0-order-12

<罢工> Bootstrap 4 push pull 类现在已成为push-{viewport}-{units}和pull-{viewport}-{units}类别，并且已删除了xs-缀.要在移动设备/xs上获得所需的1-3-2布局，请执行以下操作: Bootstrap 4推拉演示 (仅适用于4.0之前的版本)

The Bootstrap 4 push pull classes are now push-{viewport}-{units} and pull-{viewport}-{units} and the xs- infix has been removed. To get the desired 1-3-2 layout on mobile/xs would be: Bootstrap 4 push pull demo (This only works pre 4.0 beta)

Bootstrap 4.1 +

由于Bootstrap 4是flexbox，因此更改列顺序很容易.相对于父级.row，cols可以从order-1到order-12排序，例如order-md-12 order-2(最后一个md，第二个xs).

Since Bootstrap 4 is flexbox, it's easy to change the order of columns. The cols can be ordered from order-1 to order-12, responsively such as order-md-12 order-2 (last on md, 2nd on xs) relative to the parent .row.

<div class="container">
    <div class="row">
        <div class="col-3 col-md-6">
            <div class="card card-body">1</div>
        </div>
        <div class="col-6 col-md-12 order-2 order-md-12">
            <div class="card card-body">3</div>
        </div>
        <div class="col-3 col-md-6 order-3">
            <div class="card card-body">2</div>
        </div>
    </div>
</div>

演示:使用order-*类

Demo: Change order using order-* classes

桌面(大屏幕):

移动设备(较小的屏幕):

Mobile (smaller screens):

还可以使用 flexbox方向工具更改列顺序. ..

It's also possible to change column order using the flexbox direction utils...

<div class="container">
    <div class="row flex-column-reverse flex-md-row">
        <div class="col-md-8">
            2
        </div>
        <div class="col-md-4">
            1st on mobile
        </div>
    </div>
</div>

演示: Bootstrap 4.1随Flexbox方向更改订单

旧版演示
演示-Alpha 6
演示-测试版(3)

Older version demos
demo - alpha 6
demo - beta (3)

> 查看更多Bootstrap 4.1+订购演示

---

相关:
Bootstrap 4中带有push/的列排序拉和col-md-12
Bootstrap 4列的更改顺序

---

Related:
Column ordering in Bootstrap 4 with push/pull and col-md-12
Bootstrap 4 change order of columns

A-C-B A-B-C

A-C-B A-B-C

这篇关于通过Bootstrap4订购列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！