title: Bootstrap Grid System: Reset Vertical Space
body: <p>I am trying to create a responsive newsfeed page using Bootstrap. There is nothing wrong with the mobile version, as you can see in the screenshot below.</p>
  
  <p>The problem occurs when the screen gets larger, and I would like to display the elements in two separate columns. When one of the two top elements in both columns is vertically larger than the other, the third element will be pushed down as you can see on the second image. The goal is to remove the vertical space between A and C.</p>
  
  <p>Using two different rows inside a large row (representing the two columns) is no option, because the order of the elements is important, as well in the mobile version as in the desktop version.</p>
  
  <p>Currently each element has as class 'col-xs-12 col-sm-6'.</p>
  
  <p>See JSFiddle for complete code: <a href="https://jsfiddle.net/4v40x5a3/" rel="nofollow noreferrer">https://jsfiddle.net/4v40x5a3/</a></p>
  
  <pre><code>&lt;div class="row&gt;
  &lt;div class="col-xs-12 col-sm-6"&gt;&lt;/div&gt;
  &lt;div class="col-xs-12 col-sm-6"&gt;&lt;/div&gt;
  &lt;div class="col-xs-12 col-sm-6"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Mobile version example (no issues) :</strong></p>
  
  <p><img src="https://i.stack.imgur.com/176C0.png" alt="enter image description here"></p>
  
  <p><strong>Desktop version example(vertical space issue) :</strong></p>
  
  <p><img src="https://i.stack.imgur.com/iJc9F.png" alt="enter image description here"></p>