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

问题描述

我有两列，每列都有 col-md-12 类.

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

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

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

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

这甚至可以通过 Bootstrap 的列排序来实现吗?

我当前的代码:

<div class="col-xs-push-12 col-md-12">第 1 列
<div class="col-xs-pull-12 col-md-12">第 2 列

解决方案

UPDATE (FEB 2018) - v4+

现在 bootstrap 已经发布，你可以使用 order 实用程序类，因为您可以在测试版中执行此操作(请参阅下面的旧更新)，不同之处在于他们添加了这 3 个新类:

.order-first {-webkit-box-ordinal-group: 0;-ms-flex-order: -1;顺序:-1；}.order-last {-webkit-box-ordinal-group: 14;-ms-flex-order: 13;订单:13；}.order-0 {-webkit-box-ordinal-group: 1;-ms-flex-order: 0;订单:0；}

---

片段

.p-2 {背景:红色；边框:白色 5px 实心}

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

---

旧更新(2017 年 10 月)- v4.0.0 测试版

随着测试版的发布，您可以使用 bootstrap 中的 flexbox 实用程序执行此操作，例如 弹性顺序

(请参阅@ZimSystem 的回答 - 查看 alpha 版本的解决方案)

.p-2 {背景:红色；边框:白色 5px 实心}

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

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

Is this even possible with the column ordering of 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>

解决方案

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>

---

OLD UPDATE (OCT 2017) - v4.0.0 beta

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

(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 中的列排序，带有推/拉和 col-md-12的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！