Reordering columns with Thoughtbot Bourbon / Neat

Question

I was looking for the best solution on how to reorder / shift the position of columns at different breakpoints using the Thoughtbot Neat grid framework?

I would like to move the elements in my title from this (in desktop resolution):

to this (in mobile resolution):

My HTML looks like this:

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

and SCSS looks something like this (for clarity, I deleted everything that was not related to the actual layout, whether it should be relevant, I put the full SCSS code for this header for this meaning ):

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

I'm basically looking for the best / most elegant way to simulate Zurb's push / pull functions for backup in Bourbon / Well maintained.

Thanks so much for any suggestion / help!

Answer 1

Content Priority Order

If you want to switch the display order of elements in a specific view without changing the order of the contents of your HTML code, Neat supports convenient and intuitive negative-line positioning. You can move each column inside your parent as easily as this:

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

Now the article element will be on the left, and on the side it will be on the right. And you can add back the styles of mobile phones just like before to support a flexible display:

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

See the full article here: http://www.sitepoint.com/sass-bourbon-neat-lightweight-semantic-grids/

Answer 2

If it is difficult for you to check the shift positions, you can always go to the check item and shift the percentage of the marker to ideal results.

Answer 3

The drjorgepolanco example does not work. I did not find a working solution for moving the spike in Nita. IN Bootstrap Framework, you can do this easily with the .pull- * and .push- * classes.

My solution for Neat is

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

I understand that this is a hack, but it works for me}