sass - Thoughtbot Bourbon/Neat を使用した列の並べ替え

Question

ソートボットのニート グリッド フレームワークを使用して、さまざまなブレークポイントで列の位置を並べ替える/シフトする方法に関する最良の解決策を探していましたか?

ヘッダーの要素をこれから（デスクトップ解像度で）シフトしたいと思います：

これに（モバイル解像度で）：

私のHTMLは次のようになります。

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

SCSS は次のようになります (明確にするために、実際のレイアウトに関係のないものはすべて削除しました。関連する場合は、そのヘッダーの完全な SCSS コードをこの要点に置きます):

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

私は基本的に、Zurb's Foundation のプッシュ/プル再注文機能を Bourbon/Neat で模倣するための最良/最もエレガントな方法を知りたいと思っています。

提案/ヘルプをありがとう！