html - 如何使用 Flexbox Grid 堆叠 div？

Question

我正在使用 http://flexboxgrid.com框架。

我希望这些列在桌面上是水平的，但在移动设备上是堆叠的并且响应迅速。

示例(桌面):

示例(手机):

<div class="row">
    <div class="col-xs">
        <div class="box">1</div>
    </div>
    <div class="col-xs">
        <div class="box">2</div>
    </div>
    <div class="col-xs">
        <div class="box">3</div>
    </div><div class="col-xs">
        <div class="box">4</div>
    </div>
</div>

这是一个 JSFiddle，它演示了我在说什么。

https://jsfiddle.net/RohitTigga/mfv622rt/

在较小的屏幕或移动设备上，如何为行内的每一列堆叠 div？

框架不可能吗？

Answer 1

我知道我延迟了 2 年(哈哈)，但目标是为您需要的分辨率定义列的数量。 Flexbox 是使用 12 列定义的，因此要实现您的示例，您需要执行类似的操作。

<div class="row">
    <div class="col-xs-12 col-lg-3">
        <div class="box">1</div>
    </div>
    <div class="col-xs-12 col-lg-3">
        <div class="box">2</div>
    </div>
    <div class="col-xs-12 col-lg-3">
        <div class="box">3</div>
    </div>
    <div class="col-xs-12 col-lg-3">
        <div class="box">4</div>
    </div>
</div>

每个包含 box 类的 div 都被定义为获取移动版本中的 12 列。但对于 lg 分辨率，它们同样获得 3 列。要定义您要使用的分辨率，您可以随时转到 Bootstrap确认。