更改 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 是一个“移动优先”框架，因此您的 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 类创建一个类修饰符。

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

由于 Bootstrap 的 col-* 类已经使用媒体查询为每个视口设置了不同的 width 百分比，并且我们的 flex-container 默认具有 flex-direction: row;，因此您无需在 flex-items 上定义 flex-basis，这里是 why。

---

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

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

---

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

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

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

CSS order 属性指定用于布局弹性项目的顺序 在他们的弹性容器中。

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

示例：

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