/ / Foundation: über Quellenordnung (kein Flex Grid) - html, css, zurb-foundation

Foundation: über Quellbestellung (kein Flex Grid) - html, css, zurb-foundation

Ich habe ein 3-spaltiges Raster mit Inhalt und einer Seitenleiste. Auf kleinen und mittleren Geräten nimmt jeder 12 Spalten ein. Sehen cdpn.io/anon/pen/bqENqG.

Ich brauche die Sidebar, um zu kommen nach Artikel über kleine und mittlere Geräte wie folgt:

Bildbeschreibung hier eingeben

Oder die Sidebar und Artikel können im HTML getauscht werden, da die Sidebar auf dem kleinen Bildschirm zuletzt kommen sollte (ich baue diese Site zuerst mobil).

ich denken Die richtige HTML-Struktur wäre:

<div class="row">
<div class="small-12 medium-12 large-9 columns" style="background: #B9B9B9;">CONTENT</div>
<div class="small-12 medium-12 large-3 columns" style="background: #919191;">ARTICLES</div>
<div class="small-12 columns" style="background: #AAA4A4;">SIDERBAR</div>
</div>

Mit dem obigen Code, wie könnte ich haben können Sidebar rechts (mit Content und Articles auf der linken Seite) auf einem großen Bildschirm?

Im Wesentlichen möchte ich, dass es so aussieht:

Inhalt | Seitenleiste
Artikel

Ist das in dieser Situation mit Pull / Push möglich?

Ich benutze die Zurb-Stiftung und finde sie dieser Link auf Source-Bestellung in einem Raster, die helfen können.

Bitte hilf mir und danke im Voraus!

Antworten:

0 für die Antwort № 1

Sie können visivility-Klassen verwenden ... die flexbox wurde jedoch dafür entwickelt ... Überprüfen Sie das letzte Beispiel von hier: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Außerdem brauchst du weder die Klasse 12 noch die Klasse 12

<div class="row">
<div class="large-9 column" style="background: #B9B9B9;">CONTENT</div>
<div class="column large-3 show-for-large" style="background: #AAA4A4;">SIDERBAR</div>
<div class="columns" style="background: #919191;">ARTICLES</div>
<div class="columns hide-for-large" style="background: #AAA4A4;">SIDERBAR</div>
</div>