Html 小屏幕上的列/行出现问题

对于中等及以上，我有一行有4列。对于小的，我有两行两列

<div class="row">
    <div class="small-6 medium-3 columns">Grape</br>These are either white or red</div>
    <div class="small-6 medium-3 columns">Pear</div>
    <div class="small-6 medium-3 columns">Apple</div>
    <div class="small-6 medium-3 columns">Plum</div>
</div>

我遇到的问题是，对于小尺寸文本，当文本很长并转到新行时，列不能正确堆叠，左侧有一列，右侧有三列

有解决办法吗？

你可能会有专门的类名和你的Sas-Mixin用于媒体查询。我不太熟悉基金会-但是CSS作品。

.small-6 {
    border: 1px solid #fff;
    background: #ddd;
}
.small-6:nth-child(2n+1) {
    clear: both;
}
@media only screen and (min-width:40.063em) {
    .small-6:nth-child(2n+1) {
        clear: none;
    }
}

---

对于IE8支持，您需要额外的类名，而不是：n子选择器

为什么降级-hat有问题？也许我误解了这个问题？