Unexpected behavior bootstrap 3

Question

I am converting a template to a website using bootstrap 3 and less, but I dont understand this behavior of bootstrap in this particular section. I have recreated in codepen (http://codepen.io/sheez44/pen/wBEKJd)

<div class="container-fluid comments">
      <div class="container">
        <div class="row comments__titles-lockup">
          <h2 class="comments__title">Comments from our customers</h2>
          <h4 class="comments__subtitle">/\/\/\/\/\/\</h4>
          <h4 class="comments__subtitle">You can ask your question by filling in the form Callback</h4>
        </div> 
        <div class="row comments__container">
          <div class="col-md-4">
            <div class="comment-icon"><span class="fa fa-quote-right"></span></div>
            <div class="comments__lockup">
              <h3 class="comments__author">Paul Demichev</h3>
              <h5 class="comments__job-description">Web designer</h5>
              <p class="comments__comment">When making such important decisions as the conclusion of the wage project, it is important to simultaneously run a number of conditions.</p>
            </div>
          </div>
          <div class="col-md-4">
            <div class="comment-icon"><span class="fa fa-quote-right"></span></div>
            <div class="comments__lockup">
              <h3 class="comments__author">Oleg Topanic</h3>
              <h5 class="comments__job-description">Программист</h5>
              <p class="comments__comment">This is a Bank that we trust. Our history of working with Alfa-Bank has about 15 years. We have almost from the base</p>
            </div>
          </div>
          <div class="col-md-4">
            <div class="comment-icon"><span class="fa fa-quote-right"></span></div>
            <div class="comments__lockup">
              <h3 class="comments__author">Julia Usina</h3>
              <h5 class="comments__job-description">Повар</h5>
              <p class="comments__comment">In 2010, we came to the conclusion that we need a payroll project. Naturally, we considered the offers of different banks</p>
            </div>
          </div>
          <div class="col-md-4">
            <div class="comment-icon"><span class="fa fa-quote-right"></span></div>
            <div class="comments__lockup">
              <h3 class="comments__author">Serdyuk Elena</h3>
              <h5 class="comments__job-description">Студентка</h5>
              <p class="comments__comment">In 2010, we came to the conclusion that we need a payroll project. Naturally, we considered the offers of different banks</p>
            </div>
          </div>
          <div class="col-md-4">
            <div class="comment-icon"><span class="fa fa-quote-right"></span></div>
            <div class="comments__lockup">
              <h3 class="comments__author">Kulikov Vlad</h3>
              <h5 class="comments__job-description">Главный механик</h5>
              <p class="comments__comment">When making such important decisions as the conclusion of the wage project, it is important to simultaneously run a number of conditions.</p>
            </div>
          </div>
          <div class="col-md-4">
            <div class="comment-icon"><span class="fa fa-quote-right"></span></div>
            <div class="comments__lockup">
              <h3 class="comments__author">Andrey Tikhonov</h3>
              <h5 class="comments__job-description">Сварщик</h5>
              <p class="comments__comment">This is a Bank that we trust. Our history of working with Alfa-Bank has about 15 years. We have almost from the base</p>
            </div>
          </div>
        </div>
      </div> 
    </div>

As you can see in bootstrap it goes wrong after the third comments__lockup instead of 2x3 rows it outputs 1x3 1x2 1x1 rows.

Answer 1

If you dont want to add more rows you could insert:

<div class="clearfix"></div>

when you expect to finish de row after the last col. You need to apply this when you have cells with different height to avoid the problem.

If you are going to set diferents number of cells for Bootstrap modes (lg, md, sm, xs)... you will need to apply hidden-X/visible-X to these clearfix, for example:

<div class="row">
    <div class="col-lg-3 col-md-4">...</div>
    <div class="col-lg-3 col-md-4">...</div>
    <div class="col-lg-3 col-md-4">...</div>
    <div class="clearfix visible-md"></div>
    <div class="col-lg-3 col-md-4">...</div>
    <div class="clearfix visible-lg"></div>
    <div class="col-lg-3 col-md-4">...</div>
    <div class="col-lg-3 col-md-4">...</div>
    <div class="clearfix visible-md"></div>
    <div class="col-lg-3 col-md-4">...</div>
    <div class="col-lg-3 col-md-4">...</div>
    <div class="clearfix visible-lg"></div>
</div>

Answer 2

Keep every 12 columns on a separate row:

<div class="container-fluid comments">
    <div class="container">
        <div class="row">
            <div class="col-md-4">
                ....your content....
            </div>
            <div class="col-md-4">
                ....your content....
            </div>
            <div class="col-md-4">
                ....your content....
            </div>
        </div>
        <div class="row">
            <div class="col-md-4">
                ....your content....
            </div>
            <div class="col-md-4">
                ....your content....
            </div>
            <div class="col-md-4">
                ....your content....
            </div>
        </div>
       <div class="row">
            <div class="col-md-4">
                ....your content....
            </div>
            <div class="col-md-4">
                ....your content....
            </div>
            <div class="col-md-4">
                ....your content....
            </div>
        </div>
    </div>
</div>