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

我已经在多个项目的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/

任何帮助表示赞赏

最佳答案

在我看来，最简单的答案是将其排在第三位。这将使它在最窄的视口上正确排序。接下来，仅在.promotion <div>上使用.col-xs-12，以在狭窄的视口上实现全宽。最后，使用.pull-right校正更宽视口上的顺序。您的原始代码几乎已经存在，并且通过您给出的示例，我认为不需要对其进行太多复杂化。

检查您的小提琴叉子以了解我的意思:https://jsfiddle.net/rrt22y5p/

关于css - 对于所有断点，在网格的右上方保留一列，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/33761624/