Html Bootstrap 4 中的列排序，带有推/拉和 col-md-12

Column ordering in Bootstrap 4 with push/pull and col-md-12

提问by Cray

I've two columns with the class col-md-12each.

我有两列，col-md-12每列都有班级。

In desktop view they should display like:

在桌面视图中，它们应该显示为：

Col **1** 
Col **2**

In the mobile view the should display like this:

在移动视图中，应显示如下：

Col **2**
Col **1**

Is this even possible with the column ordering of Bootstrap?

Bootstrap 的列排序是否可以实现？

My current code:

我目前的代码：

<div class="row">
    <div class="col-xs-push-12 col-md-12">
        Col 1
    </div>
    <div class="col-xs-pull-12 col-md-12">
        Col 2
    </div>
</div>

回答by dippas

UPDATE (FEB 2018) - v4+

更新（2018 年 2 月）- v4+

Now that bootstrap has been released, you can achieved that using orderutility classes as you were able to do it in beta version (see old update below), with the difference that they've added these 3 new classes:

现在 bootstrap 已经发布，您可以使用order实用程序类来实现，就像您在 beta 版本中能够做到的那样（请参阅下面的旧更新），不同之处在于他们添加了这 3 个新类：

.order-first {
  -webkit-box-ordinal-group: 0;
  -ms-flex-order: -1;
  order: -1;
}

.order-last {
  -webkit-box-ordinal-group: 14;
  -ms-flex-order: 13;
  order: 13;
}

.order-0 {
  -webkit-box-ordinal-group: 1;
  -ms-flex-order: 0;
  order: 0;
}

---

---

Snippet

片段

.p-2 {
  background: red;
  border: white 5px solid
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="d-flex flex-column">
  <div class="p-2">1</div>
  <div class="p-2 order-first order-lg-2">2</div>
</div>

---

---

OLD UPDATE (OCT 2017) - v4.0.0 beta

旧更新（2017 年 10 月）- v4.0.0 测试版

With the release of beta version you can do this using flexbox utilities from bootstrap, such as flex-order

随着 beta 版本的发布，您可以使用 bootstrap 中的 flexbox 实用程序来执行此操作，例如flex-order

(see answer from @ZimSystem - to see solution with alpha version)

（请参阅@ZimSystem 的答案 - 查看 alpha 版本的解决方案）

.p-2 {
  background: red;
  border: white 5px solid
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />
<div class="d-flex flex-column">
  <div class="p-2">1</div>
  <div class="p-2 order-1 order-lg-2">2</div>
</div>

回答by Zim

Update 2019 - Bootstrap 4.3+

2019 年更新 - Bootstrap 4.3+

Now full width, 12 unit col-*-12columns can be reversed using flexboxordering.

现在col-*-12可以使用flexbox排序来反转全宽 12 个单位列。

In older Bootstrap 4 alpha and beta versions the ordering utils were flex-*...

在较旧的 Bootstrap 4 alpha 和 beta 版本中，订购实用程序是flex-*......

<div class="row">
    <div class="col-md-12">
        Col 1
    </div>
    <div class="col-md-12 flex-first flex-md-unordered">
        Col 2
    </div>
</div>

Demo Bootstrap 4 Alpha

演示 Bootstrap 4 Alpha

As of Bootstrap 4.0.0the ordering utils are order-*...

从Bootstrap 4.0.0 开始，订购工具是order-*......

<div class="row">
    <div class="col-md-12">
        Col 1
    </div>
    <div class="col-md-12 order-first order-md-2">
        Col 2
    </div>
</div>

Demo Bootstrap 4.1.0

演示引导程序 4.1.0

See the docs at https://getbootstrap.com/docs/4.0/layout/grid/#order-classes

请参阅https://getbootstrap.com/docs/4.0/layout/grid/#order-classes 上的文档

回答by Taylor Foster

One way around this is to make two versions of Col 2 and put one above Col 1 and one below it. Then use the responsive utilitiesto hide and show accordingly.

解决此问题的一种方法是制作两个版本的 Col 2，并将一个放在 Col 1 上方，一个放在其下方。然后使用响应式实用程序来相应地隐藏和显示。

回答by max

You can use flexbox, then you can use media queries to change the order:

您可以使用flexbox，然后您可以使用媒体查询来更改顺序：

.row {
  /* Setup Flexbox */
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  /* Reverse Column Order */
  -webkit-flex-flow: column-reverse;
  flex-flow: column-reverse;
}

CODEPEN

代码笔

or (default order on mobiles and tablets, reverse on desktop):

或（手机和平板电脑上的默认顺序，台式机上相反）：

@media (min-width: 992px) {
  .row {
    /* Setup Flexbox */
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    /* Reverse Column Order */
    -webkit-flex-flow: column-reverse;
    flex-flow: column-reverse;
  }
}

CODEPEN

代码笔