Team section - bootstrap alignment issue - html

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.

Answer 2

You need to add more rows in your divs. Right now the code isn't recognizing your columns in the code properly because it doesn't have anywhere to put them. I would edit your code for you but I'm on my phone.
Try putting a rowbefore the first member and ending row after the last member of the row and so on. Hope it helps.