title: Equal height divs kept together side-by-side always
body: <p>Using Bootstrap 3.x and creating a common 3 column layout.  In desktop view I want all three divs in the same row and the same height.  When shrunk down to the smallest width I want the first two divs to always remain next to each other but the third drop below.  Always, the first two divs should be the same height.  If the second div is shorter than the first, the third div ends up underneath the second, to the right of the first.</p>
  
  <pre><code>&lt;div class="row"&gt;
      &lt;div class="col-sm-12 col-md-9"&gt;
          &lt;!-- keep these two divs together side by side and the same height --&gt;
          &lt;div class="col-xs-6 col-sm-6 col-md-6"&gt;
              this is panel one
          &lt;/div&gt;
          &lt;div class="col-xs-6 col-sm-6 col-md-6"&gt;
              this is panel two
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="col-sm-12 col-md-3"&gt;
          &lt;!-- this div should be beside the other two on large screens and drop below on xsmall screens --&gt;
          side bar ad
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is another way to visualize the issue.  The first two need to be the same height:  <a href="http://www.bootply.com/29cNrJrEwT" rel="nofollow">http://www.bootply.com/29cNrJrEwT</a></p>