EDITAR O conteúdo das tabelas de preços será gerado dinamicamente, não posso prever sua altura, estou simplesmente usando o400px caso para o diagrama. Portanto, não posso definir uma altura estática para cada coluna como uma correção.

Eu tenho 8 tabelas de preços Eles são todossemelhante alturas próximas a 400px, com omaior (quadrado vermelho) sendo 430px e o menor a uma altura de 390px.

Classe responsiva para colunas:class="col-lg-3 col-md-4 col-sm-6"

Layout HTML:

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

Como impedir que as colunas sejam enviadas para"nova linha", ou seja, todas as colunas estão contidas na mesmadiv.row para que eles possam agir com responsabilidade. Mas no segundo conjunto de colunas, os dois primeiros "slots" são ignorados, a terceira linha (não mostrada) começa como normal, no entanto.

IMPORTANTE QUE TODOS ESTÃO NO MESMO.row OBJETO Para que esse aspecto responsivo funcione e as colunas colapsem.

Diagrama do problema:

O que eu quero é algo mais parecido com isto: