如何在缩小屏幕（响应）时使用Bootstrap将多列（2）显示为一个？

Question

我的设计有十二列。在较大的屏幕上，我想显示

col-md4 + col-md2 + col-md2 + col-md 2 + col-md2.

当我使用较小的屏幕时，我想显示

• col-md4在一行中，
• 第二行中的两个col-md2s
• 和最后一行中的另外两个col-md2s。

如何使用bootstrap执行此操作？

我上传了一幅关于我如何拍照的图片，因为描述可能令人困惑。 :) http://i.stack.imgur.com/S2FRs.png

Answer 1

由于Bootstrap的网格系统是移动优先的，你应该以另一种方式看待它，并从小尺寸向上分析它。 我会做的是：

<div class="col-md-4">
    <p>some text</p>
</div>
<div class="col-xs-6 col-md-2">
    <p>some text</p>
</div>
<div class="col-xs-6 col-md-2">
    <p>some text</p>
</div>
<div class="col-xs-6 col-md-2">
    <p>some text</p>
</div>
<div class="col-xs-6 col-md-2">
    <p>some text</p>
</div>

希望这有帮助。