列/行太小的问题

Question

JSFiddle

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

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

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

有解决办法吗？

Answer 1

http://jsfiddle.net/swnpkcLu/
您可能会有专门的类名和用于媒体查询的sass mixin(我不太熟悉foundation(，但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个子选择器