Html ZURB基金会5：Don & Y.X27列；我好像没有完全清理干净

在这里拉小提琴：

我使用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的网格？我怎样才能修复它呢？

好的，我想我得到了它，主要是基于dwreck08的答案。但是我添加了适当的行>列嵌套结构，并将collapse类放回原处，这样它就可以工作了

<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>

---

小提琴：

哇-很复杂，但我试过很多简单的东西，但都不管用。我使用的是Zurb5，不知道Zurb6是否能解决这个问题？