Team section - bootstrap alignment issue

Question

I'm experiencing a layout issue with my website (done using bootstrap 3) For some reason the pictures alignment is messy (see pictures below) Any idea what is wrong?

What I'd like:

What I have:

            <section id="team">
              <div class="row">
              <div class="col-xs-2 col-sm-4">
                <div class="team-member">
                  <div class="image" style="background-image:url(../images/male-employee.png)">
                  </div>
                  <p class="name">John Smith</p>
                  <p class="position">Fondateur
                    <br>Directeur Général</p>
                </div>
              </div>

              <div class="col-xs-2 col-sm-4">
                <div class="team-member">
                  <div class="image" style="background-image:url(../images/female-employee.png)">
                  </div>
                  <p class="name">John Smith</p>
                  <p class="position">Responsable diétéaires</p>
                </div>
              </div>


              <div class="col-xs-2 col-sm-4">
                <div class="team-member">
                  <div class="image" style="background-image:url(../images/female-employee.png)">
                  </div>
                  <p class="name">John Smithr</p>
                  <p class="position">Responsable dfsf, maux</p>
                </div>
              </div>
             </div>
          <div class="row">

              <div class="col-xs-2 col-sm-4">
                <div class="team-member">
                  <div class="image" style="background-image:url(../images/male-employee.png)">
                  </div>
                  <p class="name">John Smith</p>
                  <p class="position">Responsable stome</p>
                </div>
              </div>


              <div class="col-xs-2 col-sm-4">
                <div class="team-member">
                  <div class="image" style="background-image:url(../images/female-employee.png)">
                  </div>
                  <p class="name">John Smith</p>
                  <p class="position">Responsable Facturation</p>
                </div>
              </div>
              <div class="col-xs-2 col-sm-4">
                <div class="team-member">
                  <div class="image" style="background-image:url(../images/male-employee.png)">
                  </div>
                  <p class="name">John Smith</p>
                  <p class="position">Technicien</p>
                </div>
              </div>
           </div>

<div class="row">
              <div class="col-xs-2 col-sm-4  col-md-offset-2">
                <div class="team-member">
                  <div class="image" style="background-image:url(../images/female-employee.png)">
                  </div>
                  <p class="name">John Smith</p>
                  <p class="position">Accueil Clients et Secrétariat</p>
                </div>
              </div>

              <div class="col-xs-2 col-sm-4">
                <div class="team-member">
                  <div class="image" style="background-image:url(../images/female-employee.png)">
                  </div>
                  <p class="name">John Smith</p>
                  <p class="position">Responsable administrative et assistante de Direction</p>
                </div>
              </div>
</div>            

            </section>

Answer 1

After each 3th div you could add this line to fix your height issue:

<div class="clearfix hidden-xs"></div>

Explanation:

The issue was occured by having divs with different heights. Since in bootstrap all col-* classes are floated, it's required to have some kind of clearfixing in similar cases to avoid misalignment. In this particular case the clearfix should not be applied to extra small screens because in that case there are 6 cols in a row instead of 3, so this is why i have used the hidden-xs class.