对于所有断点，在网格的右上角保留一列

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更正更宽视口的排序。您的原始代码几乎就在那里，并且根据您给出的示例，我没有看到需要将其复杂化。

检查你的小提琴我的意思：https://jsfiddle.net/rrt22y5p/