No meu aplicativo Twitter Bootstrap 3.2, tenho blocos div que possuem larguras de resposive.

Mas se eu remover a classe "row", devido à alteração do tamanho do conteúdo, as alturas dos blocos se tornarão diferentes, portanto, os blocos parecerão estranhos. Verifique nessa largura uma tela maior que 992px:http://jsfiddle.net/mavent/bFcrq/13/

Se eu usar a classe "row", minha página ficará bem:http://jsfiddle.net/mavent/bFcrq/15/ Mas não sei quando usar a classe row. Como o tamanho da tela é diferente, não sei se posso usar a classe de linha por 2 divs ou 3 divs.

Então, minha pergunta é: como posso fazer com que esses blocos tenham a mesma altura para que até telas pequenas e grandes tenham uma aparência bonita?

<div class="text-center"> <div class="visible-xs visible-sm">Small screen is ok, There is problem for big screens </div> <div class="well col-lg-4 col-md-4 col-sm-12 col-xs-12"> <a href=""><h2>My pretty title 1</h2><p>My subtitle which can have different number of words</p></a> </div>

Editar: verifique também esse comportamento em telas grandes:http://jsfiddle.net/bFcrq/26/
Até eu uso a classe "row", alguns blocos são longos, outros são curtos.
Parece muito ruim quando eu uso as classes "alert- *".

Edit2: Embora eu prefira soluções CSS, uma solução baseada em JQuery também é válida para mim.