Kolumnen mit Thoughtbot Bourbon / Neat nachbestellen

Ich suchte nach der besten Lösung, um die Position von Spalten an verschiedenen Haltepunkten mithilfe des Thoughtbot-Frameworks "Neat Grid" neu zu ordnen / zu verschieben.

Ich möchte Elemente in meiner Kopfzeile hiervon verschieben (in Desktop-Auflösung):

dazu (in mobiler Auflösung):

Mein HTML sieht so aus:

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

und das SCSS sieht ungefähr so aus (aus Gründen der Übersichtlichkeit habe ich alles entfernt, was nicht mit dem tatsächlichen Layout zusammenhängt, sollte es relevant sein, habe ich den vollständigen SCSS-Code für diesen Header aufgesetztdieser Kern):

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

Ich bin im Grunde auf der Suche nach dem besten / elegantesten Weg, um Zurbs nachzuahmenPush / Pull-Nachbestellungsfunktionen der Foundation in Bourbon / Ordentlich.

Vielen Dank für jeden Vorschlag / Hilfe!