Bootstrap 3 отзывчивых колонки разной высоты

РЕДАКТИРОВАТЬ Содержимое таблиц ценообразования будет генерироваться динамически, я не могу предсказать их высоту, я просто использую400px чехол для диаграммы. Поэтому я не могу установить статическую высоту для каждого столбца в качестве исправления.

У меня есть 8 таблиц цен Все онианалогичный высоты, близкие к 400px, ссамый большой (красная площадь) будучи 430px и самым маленьким на высоте 390px.

Адаптивный класс для столбцов:class="col-lg-3 col-md-4 col-sm-6"

HTML-макет:

<div class="row">
    <% columns.each do |column| %>
        <div class="col-lg-3 col-md-4 col-sm-6">
            CONTENT
        </div>
    <% end %>   
</div>

Как предотвратить перемещение столбцов в"новый ряд"все столбцы содержатся в одномdiv.row тег, чтобы они могли действовать отзывчиво. Но во втором наборе столбцов первые два «слота» пропускаются, однако третий ряд (не показан) начинается как обычно.

ВАЖНО, ЧТО ОНИ ВСЕ ЖЕ.row ОБЪЕКТ Так что адаптивный аспект работает, и столбцы рушатся.

Диаграмма проблемы:

Что я хочу, это что-то вроде этого: