responsive-design - ヘッダーをレスポンシブにする方法は?

Question

私は次のHTMLを持っています:

<div class='layout-wrap'>
  <div class='mod-header'>
    <a class='logo' href="#"></a>
    <nav>
      <a class="action" href="#">Join now</a>
      <ul class="tour">
        <li><a href="#">item 1</a></li>
        <li><a href="#">item 2</a></li>
        <li><a href="#">item 3</a></li>
      </ul>
      <ul class="search">
        <li><a class="find" href="#">search</a></li>
      </ul>
    </nav>
  </div>
</div>

以下も参照してください。

http://jsfiddle.net/mulderp/fZ8cW/

そしてCSS：

.logo {
    text-indent: -9999px;
    float: left;
    width: 16rem;
}

nav {
   float: right;
   display: block;
}

.mod-header nav a {
   float: left;
}

次のような最小限のレスポンシブ レイアウト ソリューション (Susy など) は何ですか。

• a.logo は常に表示されます (小さな画面でも表示されます)。
• a.action は常に表示されます (小さな画面でも)
• a.find は常に表示されます
• 小さい画面では ul.tour が非表示になっています

これが簡単に可能かどうかはわかりませんが、可能かどうかを知ることは役に立ちます。

編集：

より狭い質問：小さな質問のために右側の部分のナビゲーションの中断を防ぎ、ul.tourを非表示にする方法は？

スージー・サス:

.mod-header
  @include container
  clear: both
  border: 2px red solid
  +rem('height', 70px)

  .logo
    text-indent: -9999px
    float: left
    +rem('width', 120px)
    +rem('height', 29px)
    +rem('margin', 20px 0)
    border: 2px blue solid
    +data-uri-bg('logo.png')

  nav
    @include span-columns(4,12)
    border: 2px blue solid
    float: right
    +rem('margin', 20px 0)
    +rem('height', 29px)

    ul
      li
        float: left
        +rem('margin', 0 8px)