In meiner Twitter Bootstrap 3.2-Anwendung habe ich div-Blöcke, die eine resposive Breite haben.

Wenn ich jedoch die "Zeilen" -Klasse entferne, werden die Blockhöhen aufgrund der Änderung der Inhaltslänge unterschiedlich, sodass Blöcke seltsam aussehen. Überprüfen Sie diese Breite eines Bildschirms, der größer als 992 Pixel ist:http://jsfiddle.net/mavent/bFcrq/13/

Wenn ich die Klasse "row" verwende, sieht meine Seite gut aus:http://jsfiddle.net/mavent/bFcrq/15/ Aber ich kann nicht wissen, wann ich die Zeilenklasse verwenden soll. Da die Bildschirmgröße unterschiedlich ist, kann ich nicht wissen, ob ich die Zeilenklasse für 2 Divs oder 3 Divs verwenden kann.

Meine Frage ist also, wie kann ich diese Blöcke auf die gleiche Höhe bringen, damit selbst kleine und große Bildschirme hübsch aussehen?

<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>

Bearbeiten: Überprüfen Sie dieses Verhalten auch auf großen Bildschirmen:http://jsfiddle.net/bFcrq/26/
Auch wenn ich die Klasse "row" verwende, sind einige Blöcke lang, andere kurz.
Es sieht sehr schlecht aus, wenn ich "alert- *" Klassen verwende.

Edit2: Obwohl ich CSS-Lösungen bevorzuge, ist eine auf JQuery basierende Lösung auch für mich in Ordnung.