Używam bootstrapa, potrzebuje stworzyc przy rozdzielczosc laptop, tablet - 2 rzędy po 3 zdjecia w kazdym. Natomiast w rozdzielczości "telefonowej" powinny być 3 rzędy po 2 zdjęcia. I tu pojawia się problem - pokazują się 4 rzędy: w pierwszym rzędzie - 2 zdjęcia; w drugim rzędzie 1 zdjęcie i miejsce puste obok; w trzecim rzędzie 2 zdjęcia; w ostatnim rzędzie jedno zdjęcie i miejsce puste. Jak zrobić by pokazały się 3 rzędy po 2 zdjęcia w każdym (przy małej rozdzielczości)?
Fragment kodu:
---pierwszy rząd----
<div class="row">
<div class="col-md-3 col-sm-3 col-xs-6 list-item text-center">
<img src="img/team/face1.jpg">
<div class="list-item-name">imię i nazwisko</div>
<div class="list-item-description">CEO</div>
<div class="bio">Lorem ....</div>
<ul class="mail">
<li><a href="mailto:...@gmail.com"> mail</a></li>
<li><a href="https://twitter.com/...">Twitter</a></li>
</ul>
</div>
<div class="col-md-3 col-sm-3 col-xs-6 list-item text-center">
<img src="img/team/face2.jpg">
<div class="list-item-name">imię i nazwisko</div>
<div class="list-item-description">Senior Vice President</div>
<div class="bio">Lorem..... </div>
<ul class="mail">
<li><a href="mailto:...@gmail.com"> mail</a></li>
<li><a href="https://twitter.com/..."> Twitter</a></li>
</ul>
</div>
<div class="col-md-3 col-sm-3 col-xs-6 list-item text-center">
<img src="img/team/face3.jpg">
<div class="list-item-name">imię</div>
<div class="list-item-description">Senior Vice President Worldwide Marketing</div>
<div class="bio">Lorem ... </div>
<ul class="mail">
<li><a href="mailto:..@gmail.com">mail</a></li>
<li><a href="https://twitter.com/...">Twitter</a></li>
</ul>
</div>
</div>
----drugi rząd---
<div class="row">
<div class="col-md-3 col-sm-3 col-xs-6 list-item text-center">
<img src="img/team/face4.jpg">
<div class="list-item-name">imię </div>
<div class="list-item-description">Vice President Marketing comunications</div>
<div class="bio">Lorem...</div>
<ul class="mail">
<li><a href="mailto:...@gmail.com"> mail</a></li>
<li><a href="https://twitter.com.l">Twitter</a></li>
</ul>
</div>
<div class="col-md-3 col-sm-3 col-xs-6 list-item text-center">
<img src="img/team/face5.jpg">
<div class="list-item-name">imie</div>
<div class="list-item-description">Chief Financial Officer</div>
<div class="bio">Lorem ,,,. </div>
<ul class="mail">
<li><a href="mailto:...@gmail.com">mail</a></li>
<li><a href="https://twitter.com.">Twitter</a></li>
</ul>
</div>
<div class="col-md-3 col-sm-3 col-xs-6 list-item text-center">
<img src="img/team/face6.jpg">
<div class="list-item-name">imie</div>
<div class="list-item-description">Chief People Officer</div>
<div class="bio">Lorem </div>
<ul class="mail">
<li><a href="mailto:...@gmail.com">mail</a></li>
<li><a href="https://twitter.com/..."> Twitter</a></li>
</ul>