Ponowne zamówienie kolumn z Thoughtbot Bourbon/Neat

Question

Szukałem najlepszego rozwiązania, w jaki sposób zmienić kolejność/przesunięcie pozycji kolumn w różnych punktach przerwania za pomocą struktury Neatbot's Neat grid?

Chciałbym przenieść elementy w moim nagłówka z tego (w rozdzielczości pulpitu):

do tego (w rozdzielczości komórkowej):

Moje HTML wygląda następująco:

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

i SCSS wygląda mniej więcej tak (dla zachowania przejrzystości, usuwam d wszystko, co nie było związane z rzeczywistego układu, powinny być istotne, kładę pełny kod SCSS w tym nagłówku 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); 
     } 
    } 
    } 
} 

Ja w zasadzie chce wiedzieć, jaki jest najlepszy/najbardziej elegancki sposób byłoby naśladować Zurb's Foundation's push/pull re-order functions w Bourbon/Neat.

Wielkie dzięki za wszelkie sugestie/pomoc!

Answer 1

Priorytet zawartość zamówienia

Jeśli chcesz zmienić kolejność wyświetlania elementów w danym widoku nie zmieniając kolejność treści w formacie HTML, Neat umożliwia wygodny i intuicyjny negatywnego pozycjonowania wiersza. Można przesunąć każdą kolumnę wokół wewnątrz elementu rodzica tak łatwo, jak to:

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

Teraz element artykuł będzie po lewej stronie, a na bok będzie po prawej stronie. I można dodać z powrotem style mobilnych tak samo, jak my mieliśmy ich wcześniej, aby utrzymać czuły wyświetlacz zgodny:

$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); 
    } 
    } 
} 

Zobacz cały artykuł tutaj: http://www.sitepoint.com/sass-bourbon-neat-lightweight-semantic-grids/

Answer 2

Jeśli okaże się to trudne do sprawdzenia przesunięcie Pozycje, które zawsze możesz przejść do inspekcji elementu i przesunięcia procentów marginesu, aby odnieść idealne wyniki.

Answer 3

Przykład drjorgepolanco nie działa Nie znalazłem działającego rozwiązania do przenoszenia kolczyków w Neat. W Bootstrap Framework możesz to zrobić z łatwością dzięki klasom .pull- * i .push- *.

Moje rozwiązanie dla Neat jest

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

rozumiem”hack, ale to działa na mnie }