title: Why is Bootstrap pushing last column on next line
body: <p>I have the following HTML</p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;div class="row"&gt;
          some content here
      &lt;/div&gt;
  
      &lt;div class="row"&gt;
          &lt;div class="col-xs-12"&gt;
              &lt;div class="row"&gt;
                  &lt;div class="col-xs-1"&gt;&lt;/div&gt;
                  &lt;div class="col-xs-4 col-md-2"&gt;17:00-18:00&lt;/div&gt;
                  &lt;div class="col-xs-7 col-md-9"&gt;
                      &lt;a href="#"&gt;Some looooooooooooooooooooooooooooooooooong Text goes here&lt;/a&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;!-- more rows like this follow --&gt;
          &lt;/div&gt;  
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>What I want is that my nested row has a [1][4][7] layout on 320x480 device. 
  However when I resize to about 350 width the last column goes on the next line below the date. <strong>I want the text to be on the right side of the date and not below the date (at 320x480).</strong> If I change the width of the last column to 6 it works fine. What is the reason for this? Since 1+4+7=12 I expected this to work as well. </p>