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列，从列通常呈现的位置开始 - ＆gt;位置：相对，在vp或更大的视口上。 col-vp-pull-x =将列向左拉x列，从列通常呈现的位置开始 - ＆gt;位置：相对，在vp或更大的视口上。

vp = xs，sm，md或lg

x = 1 至 12

在下面的例子中，B出现在A之前，就像我说的那样，它只是推动或拉动大于或等于指定的视口。即col-sm-push-5只会在sm视口上推5列或更多。这是因为Bootstrap是一个“移动优先”框架，因此您的HTML应该反映您网站的移动版本。然后在更大的屏幕上完成推送和拉动。

{{1}}

请参阅此处的演示：https://jsfiddle.net/kL649qp0/1/

另外，我尝试按照您的列数进行操作，但由于数量超过12列，布局变得混乱。

我希望它有所帮助！

Obs。： 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-basis上的flex-items，此处为 why 。

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

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

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

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

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

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

order中的默认flex-items值为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>

在Bootstrap中更改全宽列的顺序

2 个答案:

代码段：

编辑：

代码段：