在网格的右上角为所有断点保留一列

Question

我一直在 Twitter Bootstrap 的几个项目中使用网格系统 - 但似乎无法解决这个问题。

我想像这样在网格的右上角放置一个蓝色的推广单元格：

示例代码

<div class="row">
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">1</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">2</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">3</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 big">Promotion</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">4</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">5</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">6</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">7</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">8</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">9</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">10</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">11</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">12</div>                   
</div>

游乐场：http://jsfiddle.net/3fr3rsL3/

感谢任何帮助

Answer 1

这里使用的是Bootstrap的push和pull ordering classes:

Demo

...

<div class="col-xs-12 col-sm-4 col-md-3 col-md-push-3 col-lg-2 col-lg-push-6 big">
    <div>3</div>
</div>
<div class="col-xs-6 col-sm-4 col-md-3 col-md-pull-3 col-lg-2 col-lg-pull-2">
    <div>4</div>
</div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 col-lg-pull-2">
    <div>5</div>
</div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 col-lg-pull-2">
    <div>6</div>
</div>

...

在所有尺寸的列上强制浮动解决了移动设备的重叠问题：

.big {
    float: left;
}

Answer 2

在我看来，最简单的答案是将它排在第三位。这将使它在最窄的视口上保持正确的顺序。接下来，仅在 .promotion <div> 上使用 .col-xs-12 以在窄视口上实现全宽。最后，使用 .pull-right 更正更宽视口上的顺序。您的原始代码几乎就在那里，并且根据您提供的示例，我认为没有必要将其复杂化。

检查你的 fiddle 的这个分支，了解我的意思：https://jsfiddle.net/rrt22y5p/

在网格的右上角为所有断点保留一列

Keep one column at upper right of grid for all breakpoints

css

twitter-bootstrap

grid-layout