Twitter загружает отзывчивые высоты блока

В моем приложении Twitter Bootstrap 3.2 у меня есть блоки div, которые имеют ширину размещения.

Но если я удаляю класс «row», из-за изменения длины контента высота блоков становится другой, поэтому блоки выглядят странно. Проверьте эту ширину экрана больше, чем 992px:http://jsfiddle.net/mavent/bFcrq/13/

Если я использую класс "row", моя страница выглядит хорошо:http://jsfiddle.net/mavent/bFcrq/15/ Но я не могу знать, когда использовать класс строки. Поскольку размер экрана отличается, поэтому я не могу знать, могу ли я использовать класс строки на 2 деления или 3 деления.

Итак, мой вопрос: как я могу сделать так, чтобы эти блоки имели одинаковую высоту, чтобы даже маленькие и большие экраны выглядели красиво?

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

Изменить: Также проверьте это поведение на больших экранах:http://jsfiddle.net/bFcrq/26/
Даже я использую класс "row", некоторые блоки длинные, некоторые короткие.
Это выглядит очень плохо, когда я использую классы "alert- *".

Edit2: Хотя я предпочитаю решения CSS, решение на основе JQuery также хорошо для меня.

Ответы на вопрос(2)

Ваш ответ на вопрос