How to align blocks in height when changing resolution?

Question

css

I'm making a simple template.
The block code is as follows

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

When viewed on a tablet, one block moves out.

How to make it so that for desktop there are three columns, for mobile versions 2 columns?
It seems like he prescribed col-sm and col-xs, it seems that there is still clearfix to add, but that's where. Completely confused.

Answer 1

And yet, I'm smart.
After every second
div, col-xs had to be added for additional cleaning if they differ in height

Answer 2

You can interrupt the flow around each Nth block in this way:

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

And through @mediasetting the parameters you need for the rest of the permissions, in my opinion this is much easier than prescribing<div class="clearfix visible-xs-block"></div>

Answer 3

You can wrap every 3 blocks (if you need 3 per line) in

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