I'm facing a challenge that I can't quite wrap my head around.
I have a layout with 2 rows of 3 images. On screens 841px and smaller, I want the columns to be 50% - this part is working fine. However, since there are rows of 3, on mobile devices it displays as 2-1 and then moves to the next line for the second row. I understand this may be the intended behavior but my question is how can I avoid it?
I've created a jsfiddle to demonstrate what I mean. I want image 4 to fill the gap on the right of image 3 so that all images are displayed in a continuous order without any gaps. I tried floating the images to the left to see if that would resolve it, but no luck.
HTML
<div class="row">
<div class="col-xs-4">
<a href="#"><img src="https://s32.postimg.org/hm1cb910x/image.jpg" alt="" class="img-responsive margin-bottom"/></a>
</div>
<div class="col-xs-4">
<a href="#"><img src="https://s32.postimg.org/f5zixeiy9/image.jpg" alt="" class="img-responsive margin-bottom"/></a>
</div>
<div class="col-xs-4">
<a href="#"><img src="https://s32.postimg.org/aldcigz8x/image.jpg" alt="" class="img-responsive margin-bottom"/></a>
</div>
</div>
<div class="row">
<div class="col-xs-4">
<a href="#"><img src="https://s32.postimg.org/kjyb4y8oh/image.jpg" alt="" class="img-responsive margin-bottom"/></a>
</div>
<div class="col-xs-4">
<a href="#"><img src="https://s32.postimg.org/duwd2ocq9/image.jpg" alt="" class="img-responsive margin-bottom"/></a>
</div>
<div class="col-xs-4">
<a href="#"><img src="https://s32.postimg.org/o68pvc4fl/image.jpg" alt="" class="img-responsive margin-bottom"/></a>
</div>
</div>
CSS
.margin-bottom {
padding-bottom:20px;
}
@media (max-width: 841px) {
.col-xs-4 {
width:50%;
}
}
@media (max-width: 511px) {
.col-xs-4 {
width:100%;
}
}