title: Block that stay in line no matter the size of the screen
body: <p>I have a row that does not stay in line when the window get very narrow.
  the green block goes under the other block, is this normal behavior?</p>
  
  <p>I mean I though that because it is in a <code>"row"</code> class and because I use <code>xs</code> column that add up to 12 it should stay in line whatever the size of the screen.</p>
  
  <p>Here my code (or you can go to <a href="http://www.bootply.com/0QljcFfEwI" rel="nofollow noreferrer" title="bootply">bootply</a>)</p>
  
  <pre><code>    &lt;div class="row" style="height:150px"&gt;  
        &lt;div class="col-xs-1 bggrey" style="height:100%"&gt;&lt;/div&gt;
        &lt;div class="col-xs-6 bgblue" style="height:100%"&gt;&lt;/div&gt;
        &lt;div class="col-xs-2 bgred" style="height:100%"&gt;&lt;/div&gt;
        &lt;div class="col-xs-3 bggreen" style="height:100%"&gt;&lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>What I expect from my code (working fine if window not too narrow)
  <a href="https://i.stack.imgur.com/VvrIw.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/VvrIw.png" alt="enter image description here"></a></p>
  
  <p>What I get if window is narrowed<br>
  <a href="https://i.stack.imgur.com/KnCB3.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/KnCB3.png" alt="enter image description here"></a></p>