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!

Bedazzle

Hi @KatieK, sorry for the lack of clarity... I just edited my original question to include simplified versions of my HTML/CSS code, along with a few screenshots to make my point somehow clearer. Cheers! – Bedazzle

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/

Coati

Answer 2

If you find it difficult to check the shift positions you can always go for inspect element and shift the margin percentages to geat the ideal results.

Companionate

How does this answer the question? – Abdu

Answer 3

The example of drjorgepolanco doesn't work I hadn't find working solution for moving cols in Neat. IN Bootstrap Framework you can do it easily by .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 it' a hack but it works for me }

Astro