Riordino di colonne in una griglia semantica-stack sovrapponibile

Question

Attualmente sto giocando con le funzionalità responsive del framework Sementic-UI e ho colpito un muro quando si utilizza la griglia impilabile. In particolare, stavo cercando di replicare un layout classico della prima pagina in cui i paragrafi e le immagini di grandi dimensioni sono disposti in colonne di un terzo e di due terzi, alternando sinistra e destra.

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

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

Ripeto questo schema per tutte le sezioni e cambio le due colonne affiancate ogni volta. Il fatto è che, quando la griglia è impilata, vorrei mantenere l'immagine in cima al contenuto. Funziona bene per il primo caso perché le colonne sono già nel giusto ordine, ma ovviamente falliscono per il secondo blocco poiché l'immagine viene posizionata dopo il contenuto.

Mi chiedevo se c'è un modo semplice per realizzare questo o può essere fatto solo utilizzando javascript? Dovrei continuare a usare la griglia o dovrei usare qualcos'altro? Se devo usare javascript, quale sarebbe il modo migliore per rilevare il cambio di layout della griglia?

Questa è la prima volta che eseguo il responsive design, quindi i riferimenti sull'argomento sono i benvenuti.

Answer 1

Ciò è possibile utilizzando la variazione reversed dell'elemento di griglia. Suggerirei quanto segue per la seconda griglia:

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

Mettendo la prima immagine di default e solo invertendo su dimensioni dello schermo del computer minimizza il rischio che l'immagine possa essere alla fine con colonne impilate. Lascia la possibilità di dimensioni dello schermo in cui l'immagine appare a sinistra prima che le colonne siano impilate, ma questo dovrebbe essere un problema meno serio.