Css Zurb Foundation：如何更改断点处的列数？

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

肖像画

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

这个很好用。现在我的问题是： 如您所见，我使用了一个overfull.row，将其元素以一种方式浮动，它们重新排列成两列网格或三列网格。我觉得，这是一个肮脏的把戏

有没有办法以干净的方式解决我的问题？通过.push-、.pull-或.offset-

提前非常感谢

---

<>尼尔斯

< P>我在Zurb基金会上找到了一个标签。

你必须对我的基础更加清楚。但他们的所有示例都显示了如何在断点之间更改列的大小，而不是更改列的数量。

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

// 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);
}

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