Bootstrap Columns not aligning properly.
<p>I have this code to create a 4 column layout in Bootstrap 3. They display perfectly in desktops and mobile devices. However, in tablets, the third column goes to the left and the fourth column goes into a third row. There is a white space in the second column on the left where the third column should actually be in order to create the 2 col-sm-6 layout.   </p>

<pre><code>&lt;div class="container"&gt;
                &lt;div class="row"&gt;
                    &lt;div class="col-xs-6 col-sm-6 col-md-3 noticia"&gt;
                        &lt;img src="img/1.jpg" alt="" &gt;
                        &lt;p class="fecha"&gt;17 de Abril de 2016&lt;/p&gt;
                        &lt;h2&gt;Title&lt;/h2&gt;
                        &lt;p&gt;Some text&lt;/p&gt;
                        &lt;a href="#" class="btn btn-default"&gt;Leer Más...&lt;/a&gt;
                    &lt;/div&gt;
                    &lt;div class="col-xs-6 col-sm-6 col-md-3 noticia"&gt;
                        &lt;img src="img/3.jpg" alt="" &gt;
                        &lt;p class="fecha"&gt;17 de Abril de 2016&lt;/p&gt;
                        &lt;h2&gt;Title&lt;/h2&gt;
                        &lt;p&gt;Some text.&lt;/p&gt;
                        &lt;a href="#" class="btn btn-default"&gt;Leer Más...&lt;/a&gt;
                    &lt;/div&gt;
                    &lt;div class="col-xs-6 col-sm-6 col-md-3 noticia"&gt;
                        &lt;img src="img/2.jpg" alt="" &gt;
                        &lt;p class="fecha"&gt;17 de Abril de 2016&lt;/p&gt;
                        &lt;h2&gt;Title&lt;/h2&gt;
                        &lt;p&gt;Some text.&lt;/p&gt;
                        &lt;a href="#" class="btn btn-default"&gt;Leer Más...&lt;/a&gt;
                    &lt;/div&gt;
                    &lt;div class="col-xs-6 col-sm-6 col-md-3 noticia"&gt;
                        &lt;img src="img/2.jpg" alt="" &gt;
                        &lt;p class="fecha"&gt;17 de Abril de 2016&lt;/p&gt;
                        &lt;h2&gt;Title&lt;/h2&gt;
                        &lt;p&gt;Some text.&lt;/p&gt;
                        &lt;a href="#" class="btn btn-default"&gt;Leer Más...&lt;/a&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
        &lt;/div&gt;
</code></pre>

<p>The only style I have for this div are the following:</p>

<pre><code>.noticia{
padding:10px;
max-width:100%;    
</code></pre>

<p>}</p>

<pre><code>.noticia img{
    max-width:100%;
    margin-bottom:20px;
}
    .noticia h2{
        font-size:20px;
        font-family: 'Ubuntu', sans-serif;  
        font-weight:medium;
        margin-top:0px;
        margin-bottom:15px;
    }
</code></pre>

<p>This is a screenshot of what I am saying. Any help would be amazing. I have spent almost an hour looking into this and it is probably something I am doing wrong, but I am just starting with Bootstrap. </p>

<p><a href="https://i.stack.imgur.com/XqcSs.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/XqcSs.png" alt="enter image description here"></a></p>