Neuordnen von Spalten in einem stapelbaren semantischen Stapelraster

Question

Ich spiele gerade mit den Funktionen des Sementic-UI-Frameworks, und ich stoße bei Verwendung des stapelbaren Gitters auf eine Wand. Insbesondere habe ich versucht, ein klassisches Front-Seiten-Layout zu replizieren, bei dem große Absätze und Bilder in einem Drittel und zwei Drittel-Spalten angeordnet sind, abwechselnd links und rechts.

Ich wiederhole dieses Muster für alle Abschnitte und vertausche die zwei nebeneinander Seite-Spalten jedes Mal. Die Sache ist, wenn das Gitter gestapelt ist, möchte ich das Bild über dem Inhalt behalten. Es funktioniert gut für den ersten Fall, da die Spalten bereits in der richtigen Reihenfolge sind, aber offensichtlich für den zweiten Block fehlschlagen, da das Bild nach dem Inhalt platziert wird.

Ich frage mich, ob es eine einfache Möglichkeit gibt, dies zu erreichen oder kann es nur mit Javascript gemacht werden? Soll ich das Gitter weiter benutzen oder sollte ich etwas anderes benutzen? Wenn ich Javascript verwenden muss, was wäre der beste Weg, um die Layoutänderung des Gitters zu erkennen?

Dies ist mein erstes Mal Responsive Design, so dass Referenzen zu diesem Thema willkommen sind.

Answer 1

Dies ist mit der Variante reversed des Rasterelements möglich. Ich würde das folgende für das zweite Gitter vorschlagen:

<div class="ui stackable grid"> 
    <div class="row"> 
     <div class="sixteen wide column"> 
      <h2>Full width header</h2> 
     </div> 
    </div> 
    <div class="computer reversed row"> 
     <div class="six wide column"> 
      <img alt="Right image" /> 
     </div> 
     <div class="ten wide column"> 
      <p>Left content</p> 
     </div> 
    </div> 
</div> 

das Bild Putting ersten standardmäßig und nur auf Computer-Bildschirmgrößen Umkehren minimiert das Risiko, dass das Bild gestapelt am Ende mit Spalt sein kann. Es bleibt die Möglichkeit von Bildschirmgrößen, bei denen das Bild links vor dem Stapeln der Spalten erscheint, dies sollte jedoch weniger gravierend sein.