Susy Columns - Stacking Mobile

Question

Ok, ich bin neu bei Susy und versuche etwas zu tun, das wahrscheinlich sehr einfach ist. Auf einem großen Display habe ich zwei Spalten nebeneinander | A | B |. Wenn ich den Browser auf eine mobile Größe verkleinere, stapelt er die Spalten A über B.

Wie würde ich B Stack über A machen? Ich habe überall nachgesehen, und ich kann nicht die Mutterlast von Layouts finden. Ich kann den ganzen Tag Dokumentation lesen, aber ich bin eine visuelle Person. Gibt es einen Ort, an dem ich ein paar Susy-Gitter herunterladen kann, um mit den Einstellungen herumzuspielen, mit denen ich lernen kann?

Ich weiß, das ist ein sehr Anfänger Post, aber ich muss irgendwo anfangen.

Danke!

Answer 1

Die einfachste Möglichkeit ist, die Quelle Reihenfolge der Elemente in HTML zu ändern:

<div class="b">column B</div> 
<div class="a">column A</div> 

Wenn b zuerst im Markup kommt, wird es automatisch in den Browser auf stapeln. Sie können immer noch Susy nutzen sie in beliebiger Reihenfolge horizontal zu ordnen:

.a { 
    @include span(8 of 12); 
} 

.b { 
    @include span(last 4 of 12); 
} 

Ich weiß nicht, Ihr Layout, so dass ich nur Zahlen dort bilden. Das Schlüsselwort last wird b nach rechts drücken, so dass a auf der linken Seite ausfüllen kann.

Die andere Option beinhaltet CSS Flexbox:

Flexbox können Sie Elemente in beliebiger Reihenfolge stapeln, vertikal oder horizontal. Wenn Sie in diese Richtung gehen wollen, sollten Sie so etwas wie CSS Tricks tutorial lesen. Susy und Flexbox funktionieren gut zusammen, aber Sie müssen die Susy-Funktionen anstelle der Mixins verwenden. Sie können Susy Funktionen gelten überall Flexbox erwartet eine Breite, zum Beispiel:

.b { 
    flex-basis: span(4 of 12); 
}