title: Bootstrap 3 - two columns - div vertical align
body: <p>I have for element:<br>
  - box-1 and box-2 are col-1<br>
  - box-3 and box-4 are col-2</p>
  
  <p>box 1, 2, 4 are text, box-3 is an image.
  The two columns have different heights.  </p>
  
  <p>How can I force the vertical alignment of box-2 so to have box-2 and box-4 with the same bottom line?  </p>
  
  <p>At the moment i found this js <a href="https://github.com/Sam152/Javascript-Equal-Height-Responsive-Rows" rel="nofollow">Sam152/Javascript-Equal-Height-Responsive-Rows</a>, so i can force the two columns at the same height. I don't know if this is a step in the right way.</p>
  
  <p>Here the basic code (without the js element):</p>
  
  <pre><code>&lt;div class="container"&gt;
              &lt;div class="row"&gt;
                  &lt;!-- col 1 --&gt;
                  &lt;div class="col-md-6"&gt;
                      &lt;div id="box-1"&gt;
                          &lt;h1&gt;1&lt;br&gt;TEXT&lt;/h1&gt;
                      &lt;/div&gt;
                      &lt;div id="box-2"&gt;
                          &lt;h1&gt;2&lt;br&gt;TEXT&lt;/h1&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;!-- col 2 --&gt;
                  &lt;div class="col-md-6"&gt;
                      &lt;div id="box-3"&gt;
                          &lt;img src="http://lorempixel.com/480/360" /&gt;
                      &lt;/div&gt;
                      &lt;div id="box-4"&gt;
                          &lt;a href=""&gt;
                              &lt;h1&gt;4&lt;br&gt;TEXT&lt;/h1&gt;
                          &lt;/a&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>