title: Bootstrap columns with stacked images: need to have same column height
body: <p>I have a Bootstrap section with stacked images and the issue is that I want the second and third columns to always have the same height as the first column. I can't seem to find a solution for the second and third column because they keep fluctuating in height as I change to different view sizes. It would be ideal to have them always align to the bottom and top.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.gallery {
   min-height: 980px;
  }
    
  .gallery .row{
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container-fluid gallery"&gt;
  
    &lt;div class="row"&gt;
      &lt;div class="col-sm-5"&gt;
         &lt;a href="#"&gt;&lt;img src="http://lorempixel.com/528/980/technics" class="img-responsive"&gt;&lt;/a&gt;
      &lt;/div&gt;
      
      &lt;div class="col-sm-4"&gt;
          &lt;a href="#"&gt;&lt;img src="http://lorempixel.com/409/490/technics" class="img-responsive"&gt;&lt;/a&gt;
          &lt;a href="#"&gt;&lt;img src="http://lorempixel.com/409/490/technics" class="img-responsive"&gt;&lt;/a&gt;
      &lt;/div&gt;
    
      &lt;div class="col-sm-3"&gt;
          &lt;a href="#"&gt;&lt;img src="http://lorempixel.com/324/327/technics" class="img-responsive"&gt;&lt;/a&gt;
          &lt;a href="#"&gt;&lt;img src="http://lorempixel.com/324/327/technics" class="img-responsive"&gt;&lt;/a&gt;
          &lt;a href="#"&gt;&lt;img src="http://lorempixel.com/324/327/technics" class="img-responsive"&gt;&lt;/a&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Here is the Bootply: <a href="http://www.bootply.com/mb2Ez6G7r8" rel="nofollow">http://www.bootply.com/mb2Ez6G7r8</a></p>