css - 通过 Bootstrap4 对列进行排序

Question

我有 3 列，我想在桌面和移动设备上以不同的方式排序。

目前，我的网格如下所示:

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

在移动 View 中，我希望有以下输出:

1-3-2

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

Answer 1

2021 - Bootstrap 5

响应式排序类现在是order-first、order-last 和order-0 - order-5

Demo

2018 - Bootstrap 4

响应式ordering classes现在是 order-first、order-last 和 order-0 - order-12

<罢工> Bootstrap 4 **push** **pull** 类现在是 `push-{viewport}-{units}` 和 `pull-{viewport}-{units}` 并且 `xs-` 中缀已被删除。要在 mobile/xs 上获得所需的 1-3-2 布局将是:[Bootstrap 4 推拉演示](http://www.codeply.com/go/OmrcmepbUp)(这仅适用于 4.0 之前的测试版)

---

Bootstrap 4.1+

由于 Bootstrap 4 是 flexbox，因此很容易更改列的顺序。 cols 可以从 order-1 到 order-12 进行排序，例如 order-md-12 order-2 (最后在 md，xs 上的第 2 个)相对于父级 .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>

演示:Change order using order-* classes

桌面(大屏幕):

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

也可以使用 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 Change Order with Flexbox Direction

---

旧版本演示
demo - alpha 6
demo - beta (3)

See more Bootstrap 4.1+ ordering demos

---

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

A-C-B A-B-C