小编Fah*_*ren的帖子

我正在创建一个带有信息图表内容的响应式网页，但我遇到了这个问题：

我的问题所在的 html 结构，

<div class="holder">
    <div class="one card"></div>
    <div class="two card"></div>
    <div class="three card"></div>
</div>
<div class="holder">    
    <div class="three card"></div>    
    <div class="two card"></div>
    <div class="one card"></div>
</div>

在 600 像素以上的视口上，我希望我的信息图水平显示（每张卡片 @display: inline-block），每层交替开始，这很好用。

问题是，如果视口小于 600 像素，我会尝试垂直显示信息图（每张卡片 @display: 块）。使用这种结构（不交替）：

<div class="holder">
    <div class="one card"></div>
    <div class="two card"></div>
    <div class="three card"></div>
</div>
<div class="holder">    
    <div class="one card"></div>
    <div class="two card"></div>
    <div class="three card"></div>
</div>

当视口低于 600px 时，将我的结构从第一个转移到第二个的最佳方法是什么？

这是一个例子