title: zurb foundation trouble ordering mobile and stacking causes form input to be unclickable
body: <p>I'm using zurb foundation to help me make a website responsive. The idea is that the header should look like this on larger screens (and it does):</p>
  
  <pre><code>####### |------ Search ----------| %%%%%%%%%%%
  </code></pre>
  
  <p>And this on smaller screens (which it doesn't):</p>
  
  <pre><code>###### %%%%%%%%%%
  |---- Search ---|
  </code></pre>
  
  <p>There are two problems. The first is that the mobile one actually looks like this:</p>
  
  <pre><code>###### 
  |---- Search ---|
         %%%%%%%%%%
  </code></pre>
  
  <p>And the second is that <strong>the Search bar is unclickable</strong>. I tried changing the z-index and making the row show hidden content, to no avail. For the layout I tried push and pull mobile, but that only made things a lot worse. <em>Code for the layout is below .</em></p>
  
  <p>Interestingly, the search button still shows up, and is clickable, even though it should <em>not</em> show up, and is in the same form as the search bar. </p>
  
  <p>Is what I'm trying to do possible with zurb foundation? I really, really want to avoid having two different search forms...</p>
  
  <hr>
  
  <p>I changed the scss variables for zurb foundation to the following just for reference</p>
  
  <pre><code>$totalColumns: 16;
  $mobileTotalColumns: 8;
  $columnGutter: 0;
  </code></pre>
  
  <p>I have a header like so:</p>
  
  <pre><code>&lt;div class="row"&gt;
     &lt;div class="three mobile-three columns"&gt;&lt;/div&gt;
     &lt;div id="search" class="eight mobile-eight columns"&gt;
        &lt;div class="row"&gt;
           &lt;div class="thirteen mobile-eight columns"&gt;
              &lt;!-- text input for search --&gt;
           &lt;/div&gt;
           &lt;div class="hide-on-phones hide-on-tablets three columns"&gt;
              &lt;!-- Submit button for search --&gt;
           &lt;/div&gt;
        &lt;/div&gt;            
     &lt;/div&gt;
     &lt;nav class="five mobile-five columns"&gt;
        &lt;ul class="right"&gt;
           &lt;li&gt;&lt;%= link_to 'Teams', '#' %&gt;&lt;/li&gt;
           &lt;li&gt;&lt;%= link_to 'Records', '#' %&gt;&lt;/li&gt;
           &lt;li&gt;&lt;%= link_to 'Settings', '#' %&gt;&lt;/li&gt;
        &lt;/ul&gt;
     &lt;/nav&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Thanks in advance for any tips or suggestions!</p>