Google Analytics（分析）：平均(Google Analytics: Avg. Time on Site)

 你的列正常工作，问题是在你的第一个col-md-3 col-sm-6有一个<br> 
 
<div class="col-md-3 col-sm-6">
       <div class="service-item">
           <span class="fa-stack fa-4x">
           <i class="fa fa-circle fa-stack-2x"></i>
           <i class="fa fa-bullhorn fa-stack-1x text-primary"></i>
                        </span>
           <h4>
                <strong>Lessons</strong>
           </h4>
           <p>Learn in a group or individually</p>
           <br> /*here is the br*/

           <a href="services.html#lessons" class="btn btn-light">Learn More</a>
      </div>
</div>
 
 所以你的第一个col-md-3比第二个更大，所以它会把你的最后一个col-md-3推到一行。 
 
 要解决它只是删除tha <br>并防止这种行为，如果col-sm-6更改的内容将高度设置为您的col-sm-6 ，例如275px，这是最大的最高值。 

Your columns are working correctly, the problem is that in your first col-md-3 col-sm-6 you have a <br>
 
<div class="col-md-3 col-sm-6">
       <div class="service-item">
           <span class="fa-stack fa-4x">
           <i class="fa fa-circle fa-stack-2x"></i>
           <i class="fa fa-bullhorn fa-stack-1x text-primary"></i>
                        </span>
           <h4>
                <strong>Lessons</strong>
           </h4>
           <p>Learn in a group or individually</p>
           <br> /*here is the br*/

           <a href="services.html#lessons" class="btn btn-light">Learn More</a>
      </div>
</div>
 
So your first col-md-3 is greater than the second one so it push your last col-md-3 one line bellow.
 
To fix it just remove tha <br> and to prevent that behavior if the content of the col-sm-6 changes set a height to your col-sm-6, e.g 275px which is the highest of the largest.