通过 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 - 引导 5

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

Demo

2018 - 引导程序 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 push pull demo](http://www.codeply.com/go/OmrcmepbUp)（这仅适用于 4.0 beta 之前)

---

引导 4.1+

由于 Bootstrap 4 是 flexbox，因此很容易更改列的顺序。 cols 可以从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>

演示：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

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

由于列排序在 Bootstrap 4 beta 中不起作用，如上面重新访问的答案中提供的代码中所述，您需要使用以下内容（如 codeply 4 Flexbox order demo - 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 订单演示 - 测试版”转至 Alpha 代码库，将代码库更改为 Beta 版（并运行它）会导致 div 错误地显示在单个列中——但这看起来像是代码层问题因为从 codeply 中剪切和粘贴代码的工作方式如上所述。

Answer 6

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