Avoid second row moving to next line on smaller screens Bootstrap 3
<p>I've got an issue here that I can't quite get my head round.</p>

<p>I have 2 rows of 3 images.  What I want is on screens 841px and lower, the columns should be 50% - this works fine however as they are rows of 3, on mobile I have 2-1 and 2-1. The second row starts on a new line which probably is meant to happen but the questions is how to avoid it?</p>

<p>I've set up a jsfiddle to show you what I mean. I want image 4 to fill that gap on the right of 3 so that all images go in a continuous order without any gaps. I tried floating the images to left to see if that pulled it up but no luck.</p>

<p><a href="https://jsfiddle.net/97v6aktj/" rel="nofollow">JSFIDDLE</a></p>

<p>HTML</p>

<pre><code>&lt;div class="row"&gt;
 &lt;div class="col-xs-4"&gt;
  &lt;a href="#"&gt;&lt;img src="https://s32.postimg.org/hm1cb910x/image.jpg" alt="" class="img-responsive margin-bottom"/&gt;&lt;/a&gt;
 &lt;/div&gt;

 &lt;div class="col-xs-4"&gt;
  &lt;a href="#"&gt;&lt;img src="https://s32.postimg.org/f5zixeiy9/image.jpg" alt="" class="img-responsive margin-bottom"/&gt;&lt;/a&gt;
 &lt;/div&gt;

 &lt;div class="col-xs-4"&gt;
  &lt;a href="#"&gt;&lt;img src="https://s32.postimg.org/aldcigz8x/image.jpg" alt="" class="img-responsive margin-bottom"/&gt;&lt;/a&gt;
 &lt;/div&gt;
&lt;/div&gt;

&lt;div class="row"&gt;
 &lt;div class="col-xs-4"&gt;
  &lt;a href="#"&gt;&lt;img src="https://s32.postimg.org/kjyb4y8oh/image.jpg" alt="" class="img-responsive margin-bottom"/&gt;&lt;/a&gt;
 &lt;/div&gt;

 &lt;div class="col-xs-4"&gt;
  &lt;a href="#"&gt;&lt;img src="https://s32.postimg.org/duwd2ocq9/image.jpg" alt="" class="img-responsive margin-bottom"/&gt;&lt;/a&gt;
 &lt;/div&gt;

 &lt;div class="col-xs-4"&gt;
  &lt;a href="#"&gt;&lt;img src="https://s32.postimg.org/o68pvc4fl/image.jpg" alt="" class="img-responsive margin-bottom"/&gt;&lt;/a&gt;
 &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>CSS</p>

<pre><code>.margin-bottom {
padding-bottom:20px;
}

@media (max-width: 841px) {
.col-xs-4 {
width:50%;
}
}

@media (max-width: 511px) {
.col-xs-4 {
width:100%;
}
</code></pre>

<p>}</p>