如何使标题响应？

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？

Susy SASS：

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