title: Bootstrap grid system columns under eachother
body: <p>I am having a bit of a problem with the bootstrap grid system. I created my own navigation div at the top of the page. It all works fine for the larger screen sizes. When I reduce the size of the screen to xs, it breaks. Here is what I'm going for:</p>
  
  <pre><code>| logo | link 1 | link 2 | link 3 | link 4|
  </code></pre>
  
  <p>The above is for all screens except xs. For xs I'm getting:</p>
  
  <pre><code>| logo | link 1 |
  |      | link 2 |
  |      | link 3 |
  |      | link 4 |
  </code></pre>
  
  <p>And what I want is:</p>
  
  <pre><code>| logo   |
  | link 1 |
  | link 2 |
  | link 3 |
  | link 4 |
  </code></pre>
  
  <p>Here is my code:</p>
  
  <pre><code>&lt;div class="col-xs-10 col-xs-offset-1 col-md-8 col-md-offset-2"&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-xs-12 col-md-6"&gt;
              &lt;a href="/"&gt;&lt;h1 class="logo"&gt;LOGO&lt;/h1&gt;&lt;/a&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="row navbar navigation"&gt;
          &lt;div class="col-xs-12 col-md-6 navLinks"&gt;
              &lt;div class="col-xs-12 col-md-3 navLink"&gt;
                  &lt;h4 class="links"&gt;&lt;a href="videos.html"&gt;LINK 1&lt;/a&gt;&lt;/h4&gt;
              &lt;/div&gt;
              &lt;div class="col-xs-12 col-md-3 navLink"&gt;
                  &lt;h4 class="links"&gt;&lt;a href="photos.html"&gt;LINK 2&lt;/a&gt;&lt;/h4&gt;
              &lt;/div&gt;
              &lt;div class="col-xs-12 col-md-3 navLink"&gt;
                  &lt;h4 class="links"&gt;&lt;a href="about-us.html"&gt;LINK 3&lt;/a&gt;&lt;/h4&gt;
              &lt;/div&gt;
              &lt;div class="col-xs-12 col-md-3 navLink"&gt;
                  &lt;h4 class="links" id="contactLink"&gt;&lt;a&gt;LINK 4&lt;/a&gt;&lt;/h4&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt; 
  &lt;/div&gt;
  </code></pre>