<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>
</div>
</div>
</p>

<p>And the output can be seen <a href="http://dev.shivampaw.com/me/" rel="nofollow">on this page</a> underneath the header (services section)</p>

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

x  x  x
      x
x  x
```
When viewing on a md and above
How can this be fixed?
Answer 1
Bootstrap uses floats to organize its column divs.  If a column div is a different height it won't be able to float all the way to the left.  In your example it looks like the first and second service divs are taller than the 3rd.  This is causing the second row to not be able to float left all the way.  The fix for this is to set a height on your columns that will be consistent and allow the float:left to float all the way to the left.  Something like 

.service {
    height:200px;
}


view this codepen to see how the floats cause this: 

http://codepen.io/egerrard/pen/PGRQYK
Answer 2
1) Bootstrap 3

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>




2) PHP for Bootstrap 3

Check the counter on the multiplicity of the required number. Something like this:

<?php
  $counter = 0;
  if( have_posts() ){ while( have_posts() ){ the_post();
      if ($counter > 0) {
        $visible = '';
        if ($counter % 2 == 0) $visible .= ' visible-sm-block';
        if ($counter % 3 == 0) $visible .= ' visible-md-block visible-lg-block';
        if ($visible <> "") echo "<div class=\"clearfix" . $visible . "\"></div>\n";
      }
      echo "<div class=\"col-md-4 col-sm-6\">" . the_content() . "</div>\n";
      $counter++;
    }
  }
?>


3) from Bootstrap 3 to Bootstrap 4

xs = sm
sm = md
md = lg
lg = xs

.visible-xs-block = .hidden-md-up
.hidden-sm-down hidden-lg-up = .hidden-sm-down.hidden-lg-up
.visible-md-block = .hidden-md-down.hidden-xl-up
.visible-lg-block = .hidden-lg-down

.visible-xs-block.hidden-sm-down hidden-lg-up = .hidden-lg-up
.visible-md-block.visible-lg-block = .hidden-md-down


So check the result:



<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/css/bootstrap.min.css">

<div class="container services-offered">
    <div class="row">
        <div class="col-lg-4 col-md-6 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-lg-4 col-md-6 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 hidden-sm-down hidden-lg-up"></div>
        <div class="col-lg-4 col-md-6 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 hidden-md-down"></div>
        <div class="col-lg-4 col-md-6 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 hidden-sm-down hidden-lg-up"></div>
        <div class="col-lg-4 col-md-6 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-lg-4 col-md-6 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>



Answer 3
You need to create two different rows to accomadate 6 columns.Try the below code,

<div class="services-offered">
<div class="row"> <!--1st 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>    
  <div class='row'> <!--2nd 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>