Как выровнить блоки по высоте при изменении разрешения?

Question

[Pan Propan]

Верстаю простой шаблон.
Код блока следующий

<div class="features row doFollowrow">
                
                    <div class="col-xs-6 col-sm-4 icon-block icon-left">
                        <div class="icon"><i class="fa fa-television fa-2x"></i></div>
                        <div class="icon-block-description">
                            <h4>Responsive &amp; Retina ready</h4>
                            <p>doFollow looks great on any device of your choice</p>
                        </div>
                    </div>
                <div class="col-xs-6 col-sm-4 icon-block icon-left">
                    <div class="icon"><i class="fa fa-eyedropper fa-2x"></i></div>
                    <div class="icon-block-description">
                        <h4>Unlimited color options</h4>
                        <p>Change colors easily and give your landing page a new look in seconds</p>
                    </div>
                </div>
                <div class="col-xs-6 col-sm-4 icon-block icon-left">
                    <div class="icon"><i class="fa fa-shopping-cart fa-2x"></i></div>
                    <div class="icon-block-description"><h4>Made for conversion</h4><p>A layout that showcases your product with style</p>
                    </div>
                </div>
                
                
                    <div class="col-xs-6 col-sm-4 icon-block icon-left">
                        <div class="icon"><i class="fa fa-line-chart fa-2x"></i></div>
                        <div class="icon-block-description">
                            <h4>SEO optimized</h4>
                            <p>Clean semantic code, content first, search engines will love your new project</p>
                        </div>
                    </div>
                    <div class="col-xs-6 col-sm-4 icon-block icon-left">
                        <div class="icon"><i class="fa fa-star-o fa-2x"></i></div>
                        <div class="icon-block-description">
                            <h4>580+ Font Icons</h4>
                            <p>doFollow uses the growing FontAwesome icon library with over 580 font icons at your disposal</p>
                        </div>
                    </div>
                    <div class="col-xs-6 col-sm-4 icon-block icon-left">
                        <div class="icon"><i class="fa fa-life-ring fa-2x"></i></div>
                        <div class="icon-block-description">
                            <h4>Outstanding Support</h4>
                            <p>Need help with the template? No problem, you can count on us 365 days a year</p>
                        </div>
                    </div>
                
            </div>

При просмотре на планшете съезжает один блок.


Как сделать так чтоб для декстопа были три колонки, для мобильных версий 2 колонки?
Вроде как прописал col-sm и col-xs, кажись осталось еще clearfix добавить, но вот куда. Запутался совсем.

Answer 1

[Pan Propan]

И все таки какой же я умничка.
После каждого второго дива нужно было добавить
<div class="clearfix visible-xs-block"></div>
для дополнительной очистаки col-xs если они различаются по высоте

Answer 2

[Александр]

Можно каждому N-ному блоку прерывать обтекание вот таким способом:

.col-xs-6:nth-child(2n+3) {
   clrar: both;
} /*Для строки из двух элементов*/

И через @media задать нужные вам параметры для остальных разрешений, на мой взгляд это куда проще чем прописывать <div class="clearfix visible-xs-block"></div>

Answer 3

[Макс]

Можно каждые 3 блока (если вам в строке нужны 3) оборачивать в

<div class="row">
    <!-- тут код трех блоков -->
</div>