Zurb基金会5：列似乎并没有被正确清除

Question

小提琴这里：http://jsfiddle.net/w8sDS/

我使用Zurb基金会5.我想创建一个布局，小（移动）设备，将显示为一个2x2网格。
（在大屏幕上，它们都是一行，但每个元素的列数都不相同，但我现在并不担心这一部分，只要牢记这一点，并明白这就是为什么他们都是。在HTML同一行）

这里是我的HTML：

<div class="row collapse"> 
    <div class="small-6 columns"> 
     <img src="http://placehold.it/350x400/ccc/000&text=350x400" alt="" /> 
    </div> 
    <div class="small-6 columns"> 
     <img src="http://placehold.it/350/000/ccc&text=350x350" alt="" /> 
    </div> 
    <div class="small-6 columns"> 
     <img src="http://placehold.it/350/ccc/000&text=350x350" alt="" /> 
    </div> 
    <div class="small-6 columns"> 
     <img src="http://placehold.it/350/000/ccc&text=350x350" alt="" /> 
    </div> 
</div> 

当我认为这在小屏幕的宽度，我看到的第一个图像左对齐，其余三幅图像的所有右对齐。为什么不以2x2网格结束呢？我该如何解决它呢？

Answer 1

好的，我想我明白了，主要基于dwreck08的回答。但我添加了适当的行>列嵌套结构并将折叠类重新放入，以便它能够工作。

<div class="row collapse"> 
    <div class="small-12 medium-8 columns"> 
     <div class="row collapse"> 
      <div class="small-6 columns"> 
       <img src="http://placehold.it/350x400/ccc/000&text=350x400" alt="" /> 
      </div> 
      <div class="small-6 columns"> 
       <img src="http://placehold.it/350/000/ccc&text=350x350" alt="" /> 
      </div> 
     </div> 
    </div> 
    <div class="small-12 medium-4 columns"> 
     <div class="row collapse"> 
      <div class="small-6 columns"> 
       <img src="http://placehold.it/350/ccc/000&text=350x350" alt="" /> 
      </div> 
      <div class="small-6 columns"> 
       <img src="http://placehold.it/350/000/ccc&text=350x350" alt="" /> 
      </div> 
     </div> 
    </div> 
</div> 

小提琴：http://jsfiddle.net/w8sDS/2/