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

Posted 2023-03-05

【中文标题】Bootstrap 4 中的列排序，带有推/拉和 col-md-12

【英文标题】：Column ordering in Bootstrap 4 with push/pull and col-md-12

【发布时间】：2016-11-09 21:56:00

【问题描述】：

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

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

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

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

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

这甚至可以通过 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>

【问题讨论】：

您错过了基本列代码...col-xs-12

仍然无法正常工作.. cols 离左/右太远了:(

那是因为它是 100% 的宽度。查看其他问题：***.com/q/25714852/3739498

【参考方案1】：

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

【讨论】：

嗯，好像有点“脏”

它有点脏，但是当我们讨论全宽列时，它是更好的选择之一。如果您使用较小的网格，我们可以依靠 col-*-push-* 和 col-*-pull-* 来实现您想要的结果。

如果你想对它着迷，你可以使用 jQuery 和 clone it 并将其插入到 $(window).resize() 处理程序的 Col 1 之前。

【参考方案2】：

你可以使用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

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

@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

【讨论】：

谢谢，但我想要移动设备和桌面设备的不同顺序

我知道，你可以使用媒体查询，我给你举个例子。

可能是一个选项，如果没有 der 列排序的解决方案

【参考方案3】：

更新（2018 年 2 月）-v4+

现在 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;

---

片段

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

---

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

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

（请参阅@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>

【讨论】：

谢谢，但这不适用于全宽列，对吧？

但它并排不是全宽

这是否解决了您的问题？

@dippas 好 10/2017 更新 - 甚至没有意识到存在那些 order-x 实用程序，非常有帮助

【参考方案4】：

2021 年更新 - Bootstrap 5 测试版

order-* 分类的工作方式相同...

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

Demo Bootstrap 5

2019 年更新 - Bootstrap 4.3+

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

在较早的 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.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

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

【讨论】：

这绝对是现在的首选答案，因为它不依赖任何外部 CSS 规则等

这需要成为现在的首选答案。

@kevlarr 和 Routhinator 嘿伙计们，我刚刚用 beta 版本更新了我上面的答案。

@zimSystem 测试版已经让你使用order- 实用程序类，检查我的回答十月更新和/或测试版的CSS，他们已经更新了这个实用程序;)

老兄。对于我们这些不经常使用 Bootstrap 的人来说有什么好处。为什么他们做出如此命名的改变。这是痛苦的发现。欣赏这篇文章。