title: How to get flexbox behavior COMBINED with bootstrap columns
body: <p><strong>Problem:</strong> I can't get Bootstrap's responsive columns to have the same height.</p>
  
  <p><strong>Solution:</strong> Stack Overflow's we-code-while-you-wait service will provide it. ;)</p>
  
  <p><strong>Setup:</strong></p>
  
  <p>My problem is that I'm using bootstraps responsive columns like </p>
  
  <pre><code>&lt;div class="row"&gt;
      &lt;div class="col-xxs-12 col-xs-6 col-sm-4 col-md-5ths col-lg-5ths"&gt;
           ...
      &lt;/div&gt;
      &lt;div class="col-xxs-12 col-xs-6 col-sm-4 col-md-5ths col-lg-5ths"&gt;
           ...
      &lt;/div&gt;
      &lt;div class="col-xxs-12 col-xs-6 col-sm-4 col-md-5ths col-lg-5ths"&gt;
           ...
      &lt;/div&gt;
      &lt;div class="col-xxs-12 col-xs-6 col-sm-4 col-md-5ths col-lg-5ths"&gt;
           ...
      &lt;/div&gt;
      &lt;div class="col-xxs-12 col-xs-6 col-sm-4 col-md-5ths col-lg-5ths"&gt;
           ...
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>so that they will take up different percentage-based widths at different screensizes, e.g. the difference between what you see below</p>
  
  <p><a href="https://i.stack.imgur.com/KDCSI.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/KDCSI.png" alt="enter image description here"></a></p>
  
  <p><a href="https://i.stack.imgur.com/05r0I.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/05r0I.png" alt="enter image description here"></a></p>
  
  <p>and you can see that I've detailed in the second image the common problem I have. The fix is to force all the responsive columns to have the same height.</p>
  
  <p>I know how to use flexbox to make siblings <code>div</code>s have the same height when they are in the same row, but this screws up when applied to Boostrap columns.</p>
  
  <p>Pic of what happens when screen contracts after applying <code>flex:1</code> to Bootstrap responsive columns and <code>display:flex</code> to their parent:</p>
  
  <p><a href="https://i.stack.imgur.com/Tfdzp.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Tfdzp.png" alt="enter image description here"></a></p>
  
  <p>Is there solution that doesn't use JavaScript?</p>