Html 更改引导中全宽列的顺序

我有以下表格：

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

似乎我不能使用带全宽列的推/拉类，所以只剩下JS了吗

---

PS：在超大屏幕上，第一项也应该放在第一位，所以我不能更改超大屏幕上前两列的顺序。

我在这里做一些测试，告诉你事实，我不知道bootstrap V3中的这个功能，但是经过几分钟的搜索，我意识到实现您想要的主要目的是关注HTML标记

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

vp=xs、sm、md或lg

x=1到12

在下面的示例中，B位于A之前，就像我在下面所说的那样，它只对大于或等于指定值的视口进行推拉操作。i、 e.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>

内容B
内容A
内容C

请参见此处的演示：

此外，我试图按照你的列数，但布局混乱，因为数量超过12列

我希望有帮助

注意事项：
1.（桌面）推拉较大的视图端口。
2.（移动）较小的视口按正常顺序渲染。

---

来源：

如果您想通过flexbox实现这一点，可以执行以下操作：

为引导的

行

类创建类修饰符

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

由于Bootstrap的

col-*

类已经使用媒体查询为每个视口设置了不同的

宽度

百分比，我们的

flex容器

具有

flex direction:row默认情况下，您不需要在
弹性项目上定义
弹性基础
，这里是


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

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


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

我们将使用类
列顺序-*
作为选择器

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

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

flex items
中的默认
order
值为
0
，这就是为什么使用任何高于该值的值都可以工作的原因

CSS:

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

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

HTML:

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

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


col-sm-6
col-sm-12
col-sm-6
去查找flexbox'
订单
属性。@CBroe我也需要介绍IE，而且Bootstrap v4仍然是alpha。我不是在说BS4。IE在所有版本中对此都有足够的支持，任何负责任的开发人员都会支持。@CBroe，你向flexbox提出建议是绝对正确的。下面的答案提供了一个按预期工作的解决方案。在IE 11中工作，这就是我所需要的。这就是3d列在所有屏幕尺寸上都应该全宽的问题，即COL的总数将始终超过12。感谢您的详细解释。我将尝试将它实现到我的网格中（这有点复杂），然后返回给您。按预期工作。谢谢@不客气<代码>：）