title: Twitter bootstrap responsive block heights
body: <p>In my Twitter Bootstrap 3.2 application I have div blocks that has resposive widths. </p>
  
  <p>But if I remove "row" class, due to change of the content length, block heights become different so, blocks look weird. Check this width a screen bigger than 992px: <a href="http://jsfiddle.net/mavent/bFcrq/13/" rel="nofollow">http://jsfiddle.net/mavent/bFcrq/13/</a></p>
  
  <p>If I use "row" class, my page looks good: <a href="http://jsfiddle.net/mavent/bFcrq/15/" rel="nofollow">http://jsfiddle.net/mavent/bFcrq/15/</a>
  But I can't know when to use row class. Because screen size differs, so I can't know whether I can use row class per 2 divs or 3 divs.</p>
  
  <p>So my question is, how can I make this blocks to have same height so even small and big screens have pretty appearance ?</p>
  
  <pre><code>&lt;div class="text-center"&gt; &lt;div class="visible-xs visible-sm"&gt;Small screen is ok, There is problem for big screens &lt;/div&gt; &lt;div class="well col-lg-4 col-md-4 col-sm-12 col-xs-12"&gt; &lt;a href=""&gt;&lt;h2&gt;My pretty title 1&lt;/h2&gt;&lt;p&gt;My subtitle which can have different number of words&lt;/p&gt;&lt;/a&gt; &lt;/div&gt;
  </code></pre>
  
  <p>Edit: Also check this behaviour in big screens: <a href="http://jsfiddle.net/bFcrq/26/" rel="nofollow">http://jsfiddle.net/bFcrq/26/</a><br>
  Even I use "row" class, some blocks are long some are short.<br>
  It looks very bad when I use "alert-*" classes.</p>
  
  <p>Edit2: Although I prefer CSS solutions, a JQuery based solution also ok for me.</p>