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

在移动视图中我希望有以下输出：

1-3-2

不幸的是，我不知道如何使用 Bootstrap 4 中的

.col-md-push-*

和

.col-md-pull-*

类来解决这个问题。

Answer 1

2021 - Bootstrap 5

响应式订购类现在为

order-first

、

order-last

和

order-0

-

order-5

演示

2018 - Bootstrap 4

响应式订购课程现在为

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/OmrcmebUp)（这只适用于 4.0 beta 之前的版本）

---

引导程序4.1+

由于 Bootstrap 4 是 Flexbox，因此很容易更改列的顺序。列可以从

order-1

到

order-12

进行排序，例如相对于父级

order-md-12 order-2

的

md

（最后一个在

xs

，第二个在

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

类更改顺序

桌面（较大屏幕）：

移动设备（较小的屏幕）：

还可以使用 flexbox 方向实用程序...

更改列顺序

<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 方向更改顺序

---

旧版本演示
演示 - 阿尔法 6
演示 - 测试版 (3)

查看更多 Bootstrap 4.1+ 订购演示

---

相关
Bootstrap 4 中使用推/拉和 col-md-12 的列排序
Bootstrap 4 更改列的顺序

A-C-B A-B-C

Answer 2

这也可以通过 CSS“Order”属性和媒体查询来实现。

类似这样的：

@media only screen and (max-width: 768px) {
    #first {
        order: 2;
    }
    #second {
        order: 4;
    }
    #third {
        order: 1;
    }
    #fourth {
        order: 3;
    }
}

CodePen 链接：https://codepen.io/preston206/pen/EwrXqm

Answer 3

即使这样也行：

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

Answer 4

我正在使用 Bootstrap 3，所以我不知道是否有更简单的方法来实现 Bootstrap 4，但这个 css 应该适合你：

.pull-right-xs {
    float: right;
}

@media (min-width: 768px) {
   .pull-right-xs {
      float: left;
   }
}

...并将类添加到第二列：

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

编辑：

哦...看起来我上面写的正是 Bootstrap 4 中的 .pull-xs-right 类：X 只需将其添加到第二列，它应该可以完美工作。

Answer 5

将此类用于第一列

第二个：

第三：

Answer 6

由于列排序在 Bootstrap 4 beta 中不起作用，如上面重新访问的答案中提供的代码中所述，您将需要使用以下内容（如 codeply 4 Flexbox 顺序演示 - 提供的 alpha/beta 链接中所示）在答案中）。

<div class="container">
<div class="row">
    <div class="col-3 col-md-6">
        <div class="card card-block">1</div>
    </div>
    <div class="col-6 col-md-12  flex-md-last">
        <div class="card card-block">3</div>
    </div>
    <div class="col-3 col-md-6 ">
        <div class="card card-block">2</div>
    </div>
</div>

但请注意，“Flexbox order demo - beta”进入了 alpha 代码库，并将代码库更改为 Beta（并运行它）会导致 div 错误地显示在单列中 - 但这看起来像是一个 codeply 问题，因为切割并将代码粘贴到 codeply 之外的工作方式如上所述。

Answer 7

您可以做两个不同的容器，一个使用移动订单并隐藏在桌面屏幕上，另一个使用桌面订单并隐藏在移动屏幕上