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 я добавил новые html-классы с помощью миксинов Zurb Foundation:

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

Это нормально работает. Теперь вот мой вопрос: Как видите, я использую "overfull" .row, перемещая его элементы таким образом, чтобы они перестраивались в "сетку из двух столбцов" или "сетку из трех столбцов". . Я чувствую, это подвох.

Есть ли способ решить мою проблему чисто? Через .push-#, .pull-# или .offset-#?

Огромное спасибо заранее!

Нильс