Re-ordering columns with Thoughtbot Bourbon/Neat

Question

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

I would like to shift elements in my header 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 the SCSS looks something like this ( for the sake of clarity, I removed anything which wasn't related to the actual layout, should it be relevant, I put the full SCSS code for that header on 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);
      }
    }
  }
}

I am basically looking to know what the best/most elegant way would be to mimic Zurb's Foundation's push/pull re-order functions in Bourbon/Neat.

Thanks a lot for any suggestion/help!

Answer 1

Content Priority Ordering

If you want to switch the order of display for elements in a particular view without changing the order of the content in your HTML, Neat supports convenient and intuitive negative row positioning. You can shift each column around inside its parent element 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 the aside will be on the right. And you can add back the mobile styles the same way as we had them before to keep your responsive display consistent:

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