How to remove vertical space between divs in Bootstrap 3 layout?

Question

My grid layout of My Bootstrap 3 is as follows:

However, I do not need the space between the 1st div (yellow) and the third div (red).

Here is my code:

<div class='row'> <div class="col-xs-12 col-sm-6" style='background-color:yellow;height:100px'>1st div</div> <div class="col-xs-12 col-sm-6" style='background-color:blue;height:200px'>2nd div</div> <div class="col-xs-12 col-sm-6" style='background-color:red;height:100px'>3rd div</div> </div> 

Any ideas please?

UPDATE:

I think I found a solution ..

 <div class='row'> <div class="col-xs-12 col-sm-6" style='background-color:yellow;height:200px'>1st Div</div> <div class="col-xs-12 col-sm-6" style='float:right;background-color:blue;height:600px'>2nd Div</div><br/><div class="clearfix visible-xs"></div> <div class="col-xs-12 col-sm-6" style='background-color:red;height:2000px'>3rd Div</div> 

Answer 1

Old question, but ...

Your solution looks pretty good - in fact, all you need is float: right; on a blue div, but it works better in a media query, so if you use other formations above 992px, the div stays in the correct order

HTML:

 <div class='row'> <div class="col-xs-12 col-sm-6 col-md-4 yellow">1st div</div> <div class="col-xs-12 col-sm-6 col-md-4 blue">2nd div</div> <div class="col-xs-12 col-sm-6 col-md-4 red">3rd div</div> </div> 

CSS

 .yellow { background-color:yellow; height:100px; } .blue { background-color:blue; height:200px; } .red { background-color:red; height:100px; } @media (min-width: 768px) and (max-width: 991px) { .blue { float: right; } } 

http://jsfiddle.net/memeLab/M4P6g/1/

Answer 2

You can do it with jQuery

 $(document).ready(function() { var x=$('.row'); $.each(x, function() { var max=0; $.each($(this).find('div[class^="col-"]'), function() { if($(this).height() > max) max=$(this).height(); }); $.each($(this).find('div[class^="col-"]'), function() { $(this).height(max); }); }); });