Bootstrap 4中带有push/pull和col-md-12的列排序 [英] Column ordering in Bootstrap 4 with push/pull and col-md-12

问题描述

我有两列，每个列的类为col-md-12.

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

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

In desktop view they should display like:

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

在移动设备视图中，应显示如下:

In the mobile view the should display like this:

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

使用Bootstrap的列排序是否有可能?

Is this even possible with the column ordering of Bootstrap?

我当前的代码:

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

推荐答案

UPDATE(FEB 2018)-v4 +

现在已经发布了引导程序，您可以使用 order 实用程序类，因为您可以在Beta版中进行操作(请参见下面的旧更新)，不同之处在于它们添加了以下3个新类:

UPDATE (FEB 2018) - v4+

Now that bootstrap has been released, you can achieved that using order utility 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:

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

随着Beta版的发布，您可以使用引导程序中的flexbox实用程序来执行此操作，例如

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

(请参阅@ZimSystem的答案-以查看具有Alpha版本的解决方案)

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

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

这篇关于Bootstrap 4中带有push/pull和col-md-12的列排序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！