Help debugging bootstrap columns that are clearing

[Historical Forums User]

For some reasons these bootstrap columns are not stacking up properly. Sometimes it works, but sometimes if I change some of the text inside one of the divs it throws off a seemingly unrelated column div.

Here is a live version of the page
http://aaronhaas.com/swasiv/marketing-sales.html#main

Here is the html for each column:

<div class="col-lg-4 col-md-6 col-sm-6 bottom-pad">
  <div class="content-box ch-item">
     <div class="ch-info-wrap">
        <div class="ch-info">
           <div class="ch-info-front ch-img-1"><i class="fa fa-arrows-alt"></i></div>
           <div class="ch-info-back">
              <i class="fa fa-arrows-alt"></i>
           </div>
        </div>
     </div>
     <div class="content-box-info">
        <h4 class="">Brand Strategy</h4>
        <p>
            What’s your strategy to win customers?
        </p>
     </div>
  </div>
</div><!-- close col -->

They should be 3 columns to a row, but something is making some of them clear.

[Historical Forums User]

Thanks Senff. I noticed there is a problem with that solution. Because it’s responsive when the user resizes the screen it goes to 2 to a row.

i tried adding this but it didn’t work.

.services .container .col-md-6:nth-of-type(2n+1){
    clear:left;
}

[Author]

Posts