Zurb-Stiftung: Wie ändert man die Anzahl der Spalten an einem Haltepunkt? - css, sass, css-float, Reihe, zurb-foundation

Ich möchte ein Markup erstellen, das sich so verhält:

Porträt

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

Landschaft

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

In meiner SASS-Hauptdatei habe ich neue HTML-Klassen mit den Zurb-Foundation-Mixins hinzugefügt:

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

Irgendwo in meiner index.html gibt es sowas:

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

Das funktioniert gut. Jetzt hier ist meine Frage: Wie du sehen kannst, benutze ich einen "overfull" .rowindem sie ihre Elemente so schweben lassen, dass sie sich in ein "Zwei-Spalten-Gitter" oder ein "Drei-Spalten-Gitter" umordnen. Ich fühle, das ist ein schmutziger Trick.

Gibt es eine Möglichkeit, mein Problem sauber zu lösen? Über .push-#, .pull-# oder .offset-#?

Vielen Dank im Voraus!

Niels

Antworten:

ich fand die Antworten ein Tab weiter auf der Zurb-Stiftung docs.