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

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>

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

...

强制所有尺寸的列 float 可以解决移动设备的重叠问题:

.big {
    float: left;
}