Twitter bootstrap 在小屏幕上，仅使一个引导列在其他三个引导列的下方弹出

这是我在桌面上的页脚截图

当我缩小屏幕时，我得到了一个混乱的布局

哎哟，我希望最右边的列在其他三个列的下方，如下所示：

我试过很多东西都没有用。。。这是我目前的网格布局。。。我可以计算出如何具体地得到正确的列弹出下面

<div class="row">
    <div class="col-md-4">
        foo
    </div>
    <div class="col-md-2">
        bar
    </div>
    <div class="col-md-2">
        baz
    </div>
    <div class="col-md-4">
        qux
    </div>
</div>

福
酒吧
巴兹
库克斯

福
酒吧
巴兹
库克斯

使用所有这些。。。X列、sm列、md列和lg列。。。 它的xtra小型、小型、中型和大型视图

然后计算。。在引导网格系统中，每行有12列

比如： 4-4-4或， 4-2-2-4或， 8-2-2或任何你想要的；）

---

例如：如果你想在col-lg-6中使用两个div，你将在largeview中的一行中有两列。。如果在sm中将它们都设置为12，则在小视图中将它们作为两行中的一列显示

你能把你的代码缩减到你想要修复的页面的特定区域吗？当然可以！一秒钟..很确定您会希望以某种方式将底部div设置为

col-xs-12

，因为他们希望整个部分跨越整个宽度。感谢您花时间回复。。。为了记录在案，我不得不将col-xs-12添加到最后一列，以使事情按预期进行。哈哈，时间安排@MattD无需为最后一列声明

col-xs-12

，因为它是默认声明的。如果你努力仔细阅读引导文档，你会发现这一点。你还可以在那里读到一个惊人的事实：网格类应用于屏幕宽度大于或等于断点大小的设备，并覆盖针对较小设备的网格类。因此，例如，对元素应用任何.col md-*类不仅会影响中型设备上的样式，而且会影响大型设备上的样式（如果不存在.col lg-*类）。因此，在我们的案例中，

“col-md-4 col-xs-6”

=

“col-lg-4 col-md-4 col-sm-6 col-xs-6”

，以及

“col-md-4 col-md-4 col-sm-12 col-xs-12”

<div class="row">
    <div class="col-md-4 col-xs-6">
    foo
   </div>
    <div class="col-md-2 col-xs-3">
        bar
    </div>
    <div class="col-md-2 col-xs-3">
        baz
    </div>
    <div class="col-md-4">
        qux
     </div>
 </div>