更改 Bootstrap 中全宽列的顺序

Question

我有以下网格：

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-6">col-sm-6</div>
    <div class="col-xs-12 col-sm-6">col-sm-6</div>
    <div class="col-xs-12 col-sm-12">col-sm-12</div>
  </div>
</div>

http://codepen.io/Deka87/pen/amApvk

它在前两项下显示了 .col-sm-12 块。我想要的是在 extra smal 屏幕上的 first 列下显示同一列。

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-6">col-sm-6</div>
    <div class="col-xs-12 col-sm-12">col-sm-12</div>
    <div class="col-xs-12 col-sm-6">col-sm-6</div>
  </div>
</div>

好像我不能使用全宽列的推/拉类，所以它只剩下 JS 了吗？

PS: 第一项也应该在超小屏幕上排在第一位，所以我无法在超小屏幕上更改前两列的顺序。

Answer 1

我在这里做一些测试，说实话，我不知道 bootstrap V3 中的这个功能，但经过几分钟的搜索，我意识到主要的一点是实现你想要的是在 HTML MARKUP.

中注意

col-vp-push-x = 将列向右推 x 列，从列通常呈现的位置开始 -> 位置：相对，在 vp 或更大的视口上。 col-vp-pull-x = 将列向左拉 x 列，从列通常呈现的位置开始 -> 位置：相对，在 vp 或更大的视口上。

vp = xs、sm、md 或 lg

x = 1 到 12

在下面的示例中，B 出现在 A 之前，就像我在下面说的那样，并且它只对大于或等于指定值的视口进行推或拉。即 col-sm-push-5 只会在 sm 视口或更大的视口上推送 5 列。这是因为 Bootstrap 是一个 "mobile first" 框架，所以您的 HTML 应该反映您网站的移动版本。然后在较大的屏幕上完成推和拉。

<div class="row">
    <div class="col-sm-4  col-xs-12">
        Content B
    </div>
    <div class="col-sm-4 col-sm-push-4 col-xs-12">
        Content A
    </div>
    <div class="col-sm-4 col-sm-pull-4 col-xs-12">
        Content C
    </div>
</div>

在此处查看演示：https://jsfiddle.net/kL649qp0/1/

此外，我尝试按照您的列数进行操作，但由于列数超过 12 列，布局变得一团糟。

希望对您有所帮助！

观察：
1.（桌面）较大的视口被推拉。
2.（移动）较小的视口以正常顺序呈现。
资料来源：http://www.schmalz.io/2014/10/08/Column-Ordering-in-Bootstrap/

Answer 2

如果你想用 flexbox 实现这一点，你可以执行以下操作：

为 Bootstrap 的 row class 创建一个 class 修饰符。

.row--flex {
  display: flex; /* Creates a flex container. */
  flex-wrap: wrap; /* Wrap columns, now flex-items. */
}

由于 Bootstrap 的 col-* classes 已经使用媒体查询为每个视口设置了不同的 width 百分比，而我们的 flex-container flex-direction: row; 默认情况下，你不需要在 flex-items 上定义一个 flex-basis，这里是 .

然后删除浮动，因为不再需要它们了：

.row--flex [class^="col-"],
.row--flex [class*="col-"] {
  float: none;
}

最后，您在要移动的 col-* class 元素中使用了选择器。

我们将使用 class col-order-* 作为选择器。

将第二列向下移动，将其 order 属性值更改为 1，您就完成了。

The CSS order property specifies the order used to lay out flex items in their flex container.

flex-items 中的默认 order 值为 0，这就是为什么使用任何高于该值的值都有效的原因。

CSS:

.col-order-1 {
  order: 1;
}

HTML:

<div class="container">
  <div class="row row--flex">
    <div class="col-xs-12 col-sm-6">col-sm-6</div>
    <div class="col-xs-12 col-sm-12 col-order-1">col-sm-12</div>
    <div class="col-xs-12 col-sm-6">col-sm-6</div>
  </div>

代码片段：

.row--flex {
  display: flex;
  flex-wrap: wrap;
}
.row--flex [class^="col-"],
.row--flex [class*="col-"] {
  float: none;
}
.col-order-1 {
  order: 1;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row row--flex">
    <div class="col-xs-12 col-sm-6">col-sm-6</div>
    <div class="col-xs-12 col-sm-12 col-order-1">col-sm-12</div>
    <div class="col-xs-12 col-sm-6">col-sm-6</div>
  </div>
</div>

编辑：

如果您只想将其应用于超小屏幕，请在媒体查询中声明 col-order-* class。

示例：

@media (max-width: 480px) {
  .col-xs-order-1 {
    order: 1;
  }
}

代码片段：

.row--flex {
  display: flex;
  flex-wrap: wrap;
}
.row--flex [class^="col-"],
.row--flex [class*="col-"] {
  float: none;
}
@media (max-width: 480px) {
  .col-xs-order-1 {
    order: 1;
  }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row row--flex">
    <div class="col-xs-12 col-sm-6">col-sm-6</div>
    <div class="col-xs-12 col-sm-12 col-xs-order-1">col-sm-12</div>
    <div class="col-xs-12 col-sm-6">col-sm-6</div>
  </div>
</div>

更改 Bootstrap 中全宽列的顺序

Change the order of full width columns in Bootstrap

html

css

twitter-bootstrap

代码片段：

编辑：

代码片段：