Vertical gap between Bootstrap columns - css

Question

I'm trying to create a layout in Bootstrap that shows three blocks on a larger screen and two blocks on a smaller screen (the breakpoint occurs between sm and md).
<div class="row">
<div class="container">
<div class="col-xs-6 col-md-4">A - 50</div>
<div class="col-xs-6 col-md-4">B - 100</div>
<div class="col-xs-6 col-md-4">C - 75</div>
</div>
</div>
See CodePen example
This however results in an unwanted vertical gap between block A and C.
As I see it I have a few possible options to remove the vertical gap, but perhaps there is a better solution:
Duplicate the html and use visible-sm and visible-md to show the wanted layout. On sm it would have a two column layout with the first column containing both A and C.
Disadvantage: The block content also needs to get duplicated, which might contain a lot of html
Use JavaScript to move the block to the correct column (perhaps jQuery Masonry).
Disadvantage: I would rather have a CSS only solution
Take a look at flexbox, css columns and css grid.
Disadvantage: Browser support isn't there

Answer 1

Imperfect untested solution at http://codepen.io/elliz/pen/fvpLl. Key points:
At small widths
break B out of flow
make container smaller
HTML
<div class="container">
<!-- note: sm -> container 50% -->
<div class="row col-xs-6 col-md-12">
<!-- note: sm -> div = 100% of container which is 50% -->
<div class="col-xs-12 col-md-4 h50">A - 50</div>
<div class="col-xs-12 col-md-4 h100">B - 100</div>
<div class="col-xs-12 col-md-4 h75">C - 75</div>
</div>
</div>
CSS Fragment
/* xs and sm */
#media ( max-width: 991px) {
.h100 {
position: absolute !important; /* better to do with specificity, but quick ugly hack */
margin-left:93%;
}
}
Spacing is not perfect, but gives you a starting point for your experiments.
Note: this can be implemented using FlexBox and Grid (when it is ready) far easier - and the latest alpha version of Bootstrap does support flexbox.

Answer 2

I realize you said you'd prefer a css only solution, but in my opinion what you are trying to accomplish is not what the bootstrap devs had in mind when they designed their grid system. I would use javascript to stick that sucker where you need it:
jQuery/html/css solution
I changed your columns to be containers (I called em buckets)
HTML
<div class="row">
<div class="container">
<div id="leftBucket" class="col-xs-6 col-md-4">
<div id="A" class="h50">A - 50</div>
</div>
<div id="middleBucket" class="col-xs-6 col-md-4">
<div id="B" class="h100">B - 100</div>
</div>
<div id="rightBucket" class="hidden-sm col-md-4">
<div id="C" class="h75">C - 75</div>
</div>
</div>
</div>
<div id="hiddenDiv"></div>
Then I "borrowed" an approach to watching for media queries from the link in the comment below
JS
// stolen from: http://www.fourfront.us/blog/jquery-window-width-and-media-queries
$(window).resize(function(){
if ($("#hiddenDiv").css("float") == "none" ){
// small screen!
$('#C').appendTo('#leftBucket');
} else {
//not a small screen :P
$('#C').appendTo('#rightBucket');
}
});
And added some rules for the hidden div (that I use to watch screen width)
CSS
#hiddenDiv {float:left;}
#media only screen and (max-width: 992px){
#hiddenDiv {float:none;}
}
ps. it's good to see people using hand drawn doodles to get their ideas across, that's how I like to break it down for people also :D

Answer 3

I found a clever way of doing this. Rearrange the order. Put C before B and then use push and pull to swap the order
<div class="row">
<div class="container">
<div class="col-xs-6 col-md-4">A - 50</div>
<div class="col-xs-6 col-md-4 col-md-push-4 ">C - 75</div>
<div class="col-xs-6 col- col-md-4 col-md-pull-4">B- 100</div>
</div>
</div>

Answer 4

I have created a fiddle with a wrapping div added with a fixed width.
For 320 screen size, reduced the wrapper width and also changed float of the B div to float: right
Fiddle here - http://jsfiddle.net/afelixj/2q785vp5/2/