根据离子网格中的屏幕尺寸/方向更改div堆叠布局

Question

我的html结构类似于：

<div class="row">
    <div class="col-sm-12 col-md-6 col-xl-3">
    </div>
    <div class="col-sm-12 col-md-6 col-xl-3">
    </div>
    <div class="col-sm-12 col-md-6 col-xl-3">
    </div>

    ...
</div>

应该将大量的div堆叠在1列中，中间2列，大屏幕上4列......

有人可以帮助我在离子框架中如何做到这一点吗？

Answer 1

您的设计中存在一些会影响正确答案的变量（例如，您希望垂直堆叠DIV如何相互交互以及您希望每个DIV的内容如何影响DIV高度）。但是，一般来说，这可以通过响应各种宽度（我选择2000,1000和700作为断点）并更改浮动div的宽度来完成媒体查询：

http://codepen.io/anon/pen/gPKEax

代码转储：

Integer