title: CSS display flex not working
body: <p>I am using bootstrap and I have two elements at are col-md-6 inside a row and what I am trying to do is make both the col-md-6 equal height without setting a height. I have tried setting the row as display flex, but that didnt work, the background image at the bottom of the first col-md-6 is short in height. Here is my code.</p>
  
  <pre><code>&lt;div class="row row-eq-height"&gt;
              &lt;div class="col-md-6 upcoming-communities-info"&gt;
                  &lt;div class="col-md-12 landing-introduction padding-left container-padding-right container-padding-bottom" style="background-color: #FFF;"&gt;
                      &lt;img src="/Images/communities/upcoming-communities/logo.jpg"&gt;
                      &lt;h1&gt;Coming To Soon&lt;/h1&gt;
                      &lt;ul&gt;
                          &lt;li&gt;Point 1&lt;/li&gt;
                          &lt;li&gt;Point 2&lt;/li&gt;
                          &lt;li&gt;Point 3&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/div&gt;
                  &lt;div class="col-md-12 landing-image" style="background: url(/Images/communities/background.jpg) 0px -100px; background-size: cover;"&gt;
                      &lt;div class="right-pull"&gt;
                          &lt;h2&gt;Towns &amp;amp; Singles&lt;/h2&gt;
                          &lt;h1&gt;&lt;span class="from"&gt;from&lt;br&gt;the&lt;/span&gt;&lt;span class="dollar"&gt;$&lt;/span&gt;&lt;span class="price"&gt;400's&lt;/span&gt;&lt;/h1&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="col-md-6 upcoming-form"&gt;
                    &lt;!--A massive HTML form--&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>How do I get both col-md-6 the same height?</p>