css - Zurb Foundation:如何更改断点处的列数？

我想构建一个行为如下的标记：

肖像

<element-1><element-2>
<element-3><element-4>
<element-5><element-6>

景观

<element-1><element-2><element-3>
<element-4><element-5><element-6>

在我的SASS主文件中，我使用Zurb Foundation mixins添加了新的html类：

// Foundation
@import "../bower_components/foundation/scss/foundation/components/grid";

// new grid classes
$small-only-and-landscape: "#{$screen} and (max-width: #{upper-bound($small-range)}) and (orientation: landscape)";
$small-only-and-portrait: "#{$screen} and (max-width: #{upper-bound($small-range)}) and (orientation: portrait)";

@media #{$small-only-and-landscape} {
    @include grid-html-classes($size:small-landscape);
}

@media #{$small-only-and-portrait} {
    @include grid-html-classes($size:small-portrait);
}

在我的index.html中的某处有这样的东西：

<div class="row">
    <div class="small-landscape-4 small-portrait-6 columns">
        <a href="pictures.html">Bilder</a>
    </div>
    <div class="small-landscape-4 small-portrait-6 columns">
        <a href="#">Freunde</a>
    </div>
    <div class="small-landscape-4 small-portrait-6 columns">
        <a href="#">Videos</a>
    </div>
    <div class="small-landscape-4 small-portrait-6 columns">
        <a href="#">Basteln</a>
    </div>
    <div class="small-landscape-4 small-portrait-6 columns">
        <a href="#">Spiele</a>
    </div>
    <div class="small-landscape-4 small-portrait-6 columns">
        <a href="#">Audio</a>
    </div>
</div>

这很好。现在这是我的问题：
如您所见，我使用的是“过度” .row，以重新排列为“两列网格”或“三列网格”的方式浮动其元素。我觉得这是一个肮脏的把戏。

有没有办法彻底解决我的问题？通过.push-#，.pull-#或.offset-#吗？

提前非常感谢您！

尼尔斯

最佳答案

我在Zurb基础文档中进一步找到了answer一个选项卡。

关于css - Zurb Foundation:如何更改断点处的列数？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/25621895/