Html 是否从上到下在父级中拟合元素？

我正在设计一个博客提要，我有两类元素。大盒子和。小盒子。在桌面上，第一个有60%的宽度，第二个有40%，两个都有不同的高度

<div>
   <div class="big-box"></div>
   <div class="small-box"></div>
   <div class="big-box"></div>
   <div class="small-box"></div>
   <div class="big-box"></div>
   <div class="small-box"></div>
</div> 

我试图找出如何在移动设备上保持订单的同时，从上到下装入他们的容器：

---

我知道有jQuery，比如Mashine插件，但是由于元素有固定的宽度，我希望有一种更简单的方法来实现。仅仅使用css就可以做到这一点吗？如果没有，下一个更简单的方法是什么？

如果您需要所有尺寸的%:

html结构：

<div class="container">
    <div class="left">
        <div class="big"></div>
        <div class="big"></div>
    </div>
    <div class="right">
        <div class="small"></div>
        <div class="small"></div>
        <div class="small"></div>
        <div class="small"></div>
    </div>
</div>

---

使用引导网格系统几乎可以实现这一点：

检查我的JSFIDLE：

唯一的问题是不同的div高度。Bootstrap通过使用clearfix divs解决了这一问题：-

<div class="clearfix visible-md"></div>

---

如果无法访问html，则可以通过脚本注入clearfix div，尽管方框顶部不会按照您的图表排列，但请尝试更改我的JSFIDLE上的html框架宽度，看看会发生什么。

在容器中从上到下填充是什么意思？它们在html中是否总是交替出现？只需做两个列div，并将相关方框分别放入其中即可。更简单。@Paulie_D我不能创建两个列div，原因是它应该是响应的，在移动设备上只有一个列可以在这两个列之间交替sizes@web-tiki我的意思是，每个元素都应该尽可能靠近顶部，但我做不到。我需要保留这个结构，因为我没有访问html的权限，也因为我需要使它具有响应性，如果我放弃了，那么在移动设备上，元素的顺序就错了