Riordino colonne con Thoughtbot Bourbon/Neat

Question

Stavo cercando la soluzione migliore su come riordinare/spostare la posizione delle colonne a diversi punti di interruzione utilizzando il framework Neat grid di Thoughtbot?

Vorrei spostare gli elementi nel mio colpo di testa da questo (in risoluzione del desktop):

a questo (in risoluzione cellulare):

mio HTML simile a questa:

<header> 
    <section id='header_elements'> 
     <p id="chocolat_logo"><strong><a href="#"><img alt="Chocolat Restaurant Logo" itemprop="logo" src="/assets/main_logo.png" /></a></strong></p> 
     <nav> 
     <ul> 
      <li id='home_link'> 
      Home 
      </li> 
      <li id='menus_link'> 
      <a href="/menus/evening" itemprop="menu">Menus</a> 
      </li> 
      <li id='drinks_link'> 
      <a href="/menus/wine-list" itemprop="menu">Drinks</a> 
      </li> 
      <li id='contact_link'> 
      <a href="#">Contact Us</a> 
      </li> 
     </ul> 
     </nav> 
     <ul id='top_contact_details'> 
     <li class='social_link' id='twitter_link'> 
      <a href='twitter'> 
      Twitter 
      </a> 
     </li> 
     <li class='social_link' id='facebook_link'> 
      <a href='facebook'> 
      Facebook 
      </a> 
     </li> 
     <li id='top_phone''> 
      <span> 
      (061) 
      </span> 
      412 888 
     </li> 
     </ul> 
    </section> 
    </header> 

e SCSS assomiglia a questo (per motivi di chiarezza, rimuovo d tutto ciò che non è stato collegato con il layout attuale, dovrebbe essere rilevante, ho messo il codice completo SCSS per quel colpo di testa this gist):

header{ 
    @include outer-container; 

    #header_elements{ 
    width: 100%; 
    height: 100%; 

    // LOGO 
    #chocolat_logo{ 
     float: left; 
     @include span-columns(3); 
     @include media($mobile) { 
     float: left; 
     @include span-columns(6); 
     } 
    } 

    // Main Navigation 
    nav{ 
     @include media(min-width 480px){ 
     @include span-columns(6); 
     } 
     @include media($mobile) { 
     @include fill-parent(); 
     } 

    } 

    //Contact Details 
    #top_contact_details{ 
     @include span-columns(3); 
     @include media($mobile) { 
     @include span-columns(6); 
     } 
    } 
    } 
} 

sto fondamentalmente cercando di sapere qual è il modo migliore/più elegante sarebbe quello di imitare lo Foundation's push/pull re-order functions di Zurb in Bourbon/Neat.

Grazie mille per qualsiasi suggerimento/aiuto!

Answer 1

Content priorità per l'ordine

Se si desidera passare l'ordine di visualizzazione per gli elementi in una vista particolare senza cambiare l'ordine dei contenuti nel codice HTML, Ordinato supporta comoda e intuitiva posizionamento fila negativo. È possibile spostare ogni colonna in giro dentro il suo elemento genitore facilmente come questo:

section { 
    @include outer-container; 
    aside { 
    @include span-columns(3); 
    @include shift(-12); 
    } 
    article { 
    @include span-columns(9); 
    @include shift(3); 
    } 
} 

Ora l'elemento articolo sarà a sinistra, e la parte sarà sulla destra. E si può aggiungere nuovamente gli stili di telefonia mobile nello stesso modo, come abbiamo avuto prima di mantenere il vostro schermo reattivo coerente:

$mobile: new-breakpoint(max-width 500px 4); 

section { 
    @include outer-container; 
    aside { 
    @include span-columns(3); 
    @include shift(-12); 
    @include media($mobile) { 
     @include span-columns(4); 
    } 
    } 
    article { 
    @include span-columns(9); 
    @include shift(3); 
    @include media($mobile) { 
     @include span-columns(4); 
    } 
    } 
} 

Vedi l'articolo completo qui: http://www.sitepoint.com/sass-bourbon-neat-lightweight-semantic-grids/

Answer 2

Se si hanno difficoltà a controllare il passaggio posizioni che puoi sempre selezionare per controllare l'elemento e spostare le percentuali di margine per ottenere i risultati ideali.

Answer 3

L'esempio di drjorgepolanco non funziona Non ho trovato soluzione funzionante per spostare i cols in Neat. IN Bootstrap Framework puoi farlo facilmente con le classi .pull- * e .push- *.

La mia soluzione per Neat è

section { 
    @include outer-container; 
    position:relative 
aside { 
    @include span-columns(3); 
    @include shift(9); 
} 
article { 
    @include span-columns(9); 
    position:absolute; 
    } 

ho capito' un hack, ma funziona per me }