Bootstrap Row распадается на мобильный

Question

У меня есть ряд из 4 продуктов, в основном нравится так:

<div class="row"> 

    <div class="col-xs-6 col-sm-3"> 

    <div class="image"> 
     <img src="..."> 
    </div> 
    <div class="text"> 
     Text here 
    </div> 

    </div> 
    <div class="col-xs-6 col-sm-3"> 

    <div class="image"> 
     <img src="..."> 
    </div> 
    <div class="text"> 
     Text here 
    </div> 

    </div> 
    <div class="col-xs-6 col-sm-3"> 

    <div class="image"> 
     <img src="..."> 
    </div> 
    <div class="text"> 
     Text here 
    </div> 

    </div> 
    <div class="col-xs-6 col-sm-3"> 

    <div class="image"> 
     <img src="..."> 
    </div> 
    <div class="text"> 
     Text here 
    </div> 

    </div> 

</div> 

Это отлично смотрится на рабочем столе:

Однако на мобильном телефоне он распадается:

Все изображения имеют одинаковую высоту, поэтому я думаю, что это связано с различной длиной надписи. Я не хочу иметь высоту набора на <div class="text">, так как я не могу гарантировать, что подпись в нем будет соответствовать.

Есть ли умный способ в CSS (или jQuery if must), чтобы установить высоты надписей, чтобы они соответствовали самым высоким заголовкам в строке? Это также должно привести к изменению размера браузера.

Благодаря

Answer 1

Там на самом деле, используя clearfix элементы каждого энного строк, которые будут отображаться только на определенных контрольных точках.

<div class="clearfix visible-xs-block"></div>

Каждый второй элемент, поместите этот clearfix элемент, и вы можете установить его в visible-xs-block так, что только появляется на xs.

<div class="col-xs-6 col-sm-3"> 
    /* .. */ 
</div> 
<div class="col-xs-6 col-sm-3"> 
    /* .. */ 
</div> 
<div class="clearfix visible-xs-block"></div> 
<div class="col-xs-6 col-sm-3"> 
    /* .. */ 

.. и так далее.

clearfix способ для элемента автоматически очищать его дочерние элементы

из Madara Uchiha