How to make a header responsive?

Question

I am having the following 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>

See also:

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

And CSS:

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

nav {
   float: right;
   display: block;
}

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

What is a minimum responsive layout solution (e.g. with Susy) such that:

• a.logo is always visible (also for small screens)
• a.action is always visible (also for small screens)
• a.find is always visible
• ul.tour is hidden for small screens

Not sure if this easily possible, but it would be helpful to know if yes.

Edit:

Narrower question: How to prevent the break in nav of the right part for small questions, and hide the 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)