title: layout the different cols with different height in the same row issue
body: <p>I want to use bootstrap3 to layout like this:</p>
  
  <p><a href="http://ppt.cc/4KCS" rel="nofollow">http://ppt.cc/4KCS</a></p>
  
  <p>But the grid system seems that the different columns in the same row can't has different height, or it may appear white block.</p>
  
  <p>My code below, but if I change the height value of right side column, a whole row will crash!</p>
  
  <pre><code>&lt;div class="container"&gt;
  &lt;div class="row clearfix"&gt;
      &lt;div class="col-md-6 column" style="background:red; height:40%;"&gt;test
      &lt;/div&gt;
      &lt;div class="col-md-6 column" style="background:blue;"&gt;test
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="row clearfix"&gt;
      &lt;div class="col-md-6 column" style="background:yellow; height:50%;"&gt;test
      &lt;/div&gt;
      &lt;div class="col-md-6 column" style="background:green;"&gt;tset
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="row clearfix"&gt;
      &lt;div class="col-md-12 column" style="background:gray; height:10%;"&gt;test
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>Can anyone help me, thanks!</p>