Shiv Shiv - 1 month ago 15
CSS Question

Bootstrap col-md-4 to col-sm-6

I have seen this question: Boostrap 3 - col-md-4 to col-sm-6, or grid of 3x2 to 2x3

But it hasn't worked for me.

This is my HTML:



<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="services-offered">
<div class="row">
<div class="col-md-4 col-sm-6 col-xs-12 service">
<div class="service-icon"><span class="fa fa-5x fa-code"></span></div>
<div class="service-content">
<h3>Web Development</h3>
<p>My main area of expertise is in web development. I create professional looking websites at affordable prices. All of my websites come with speed, security and search engine optimisation as a standard.</p>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12 service">
<div class="service-icon"><span class="fa fa-5x fa-database"></span></div>
<div class="service-content">
<h3>Web App Development</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12 service">
<div class="service-icon"><span class="fa fa-5x fa-wordpress"></span></div>
<div class="service-content">
<h3>WordPress Development</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</p>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12 service">
<div class="service-icon"><span class="fa fa-5x fa-code"></span></div>
<div class="service-content">
<h3>Web Development</h3>
<p>My main area of expertise is in web development. I create professional looking websites at affordable prices. All of my websites come with speed, security and search engine optimisation as a standard.</p>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12 service">
<div class="service-icon"><span class="fa fa-5x fa-database"></span></div>
<div class="service-content">
<h3>Web App Development</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12 service">
<div class="service-icon"><span class="fa fa-5x fa-wordpress"></span></div>
<div class="service-content">
<h3>WordPress Development</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</p>
</div>
</div>
</div>
</div>





And the output can be seen on this page underneath the header (services section)

As you can see. The classes are
col-md-4 col-sm-6 col-xs-12 service
however it is position like this:

x x x
x
x x


When viewing on a
md
and above

How can this be fixed?

Answer

Try to use responsive column resets:

With the four tiers of grids available you're bound to run into issues where, at certain breakpoints, your columns don't clear quite right as one is taller than the other. To fix that, use a combination of a .clearfix and our responsive utility classes.

Don't forget to define .clearfix block for large devices too:

<div class="clearfix visible-md-block visible-lg-block"></div>

Check the result:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="container services-offered">
    <div class="row">
        <div class="col-md-4 col-sm-6 col-xs-12 service">
            <div class="service-icon"><span class="fa fa-5x fa-code"></span></div>
            <div class="service-content">
                <h3>Web Development</h3>
                <p>My main area of expertise is in web development. I create professional looking websites at affordable prices. All of my websites come with speed, security and search engine optimisation as a standard.</p>
            </div>
        </div>
        <div class="col-md-4 col-sm-6 col-xs-12 service">
            <div class="service-icon"><span class="fa fa-5x fa-database"></span></div>
            <div class="service-content">
                <h3>Web App Development</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
            </div>
        </div>
        <div class="clearfix visible-sm-block"></div>
        <div class="col-md-4 col-sm-6 col-xs-12 service">
            <div class="service-icon"><span class="fa fa-5x fa-wordpress"></span></div>
            <div class="service-content">
                <h3>WordPress Development</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</p>
            </div>
        </div>
        <div class="clearfix visible-md-block visible-lg-block"></div>
        <div class="col-md-4 col-sm-6 col-xs-12 service">
            <div class="service-icon"><span class="fa fa-5x fa-code"></span></div>
            <div class="service-content">
                <h3>Web Development</h3>
                <p>My main area of expertise is in web development. I create professional looking websites at affordable prices. All of my websites come with speed, security and search engine optimisation as a standard.</p>
            </div>
        </div>
        <div class="clearfix visible-sm-block"></div>
        <div class="col-md-4 col-sm-6 col-xs-12 service">
            <div class="service-icon"><span class="fa fa-5x fa-database"></span></div>
            <div class="service-content">
                <h3>Web App Development</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
            </div>
        </div>
        <div class="col-md-4 col-sm-6 col-xs-12 service">
            <div class="service-icon"><span class="fa fa-5x fa-wordpress"></span></div>
            <div class="service-content">
                <h3>WordPress Development</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</p>
            </div>
        </div>
    </div>          
</div>