vertically compressed bootstrap row - html

Question

I have a code which renders articles into col-md-6 divs inside only one row (as is shown in code below). Each article has different height. The goal is to get (optically) two columns of articles with approximately equal total height.
<div class="row">
<!-- FOR ARTICLE IN ARTICLES -->
<div class="col-md-6">
<article>
<!-- content with variable height -->
</article>
</div>
<!-- ENDFOR -->
</div>
The problem is a white vertical gap between first and third div as is shown in snippet bellow. Is it possible to show third div just below the first without vertical gap?
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="row">
<div class="col-xs-6">
<article style="background: yellow; height: 200px;">
FIRST
</article>
</div>
<div class="col-xs-6">
<article style="background: red; height: 300px;">
SECOND
</article>
</div>
<div class="col-xs-6">
<article style="background: green; height: 350px;">
THIRD
</article>
</div>
<div class="col-xs-6">
<article style="background: gray; height: 200px;">
FOURTH
</article>
</div>
</div>

Answer 1

As mentioned in my comments, masonry.js would be the best approach. If you want something a bit simpler, you could simply re-structure the html see example https://jsfiddle.net/kvb5hb6f/12/
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="row">
<div class="col-xs-6">
<div class="col-xs-12">
<article style="background: yellow; height: 200px;">
FIRST
</article>
</div>
<div class="col-xs-12">
<article style="background: green; height: 350px;">
THIRD
</article>
</div>
</div>
<div class="col-xs-6">
<div class="col-xs-12">
<article style="background: red; height: 300px;">
SECOND
</article>
</div>
<div class="col-xs-12">
<article style="background: gray; height: 200px;">
FOURTH
</article>
</div>
</div>
</div>