Vertical clearance between Bootstrap columns

Question

I am trying to create a layout in Bootstrap that shows three blocks on a big screen and two blocks on a smaller screen (a 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 results in an undesirable vertical gap between blocks A and C.

As I can see, I have several possible options for bridging the vertical gap, but maybe there is a better solution:

• Duplicate the html and use visible-sm and visible-md to display the desired layout. On sm, it would have an arrangement of two columns with the first column containing both A and C.
  • Disadvantage: the contents of the block also need to be duplicated, which can contain a lot of html
• Use JavaScript to move the block to the correct column (possibly jQuery Masonry).
  • Disadvantage: I would rather have only a CSS solution.
• Take a look at the flexbox, css columns and the css grid.
  • Disadvantage: there is no browser support.

Answer 1

Invalid untested solution in http://codepen.io/elliz/pen/fvpLl . Key points:

• Small width
  • break B off stream
  • 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 snippet

 /* xs and sm */ @media ( max-width: 991px) { .h100 { position: absolute !important; /* better to do with specificity, but quick ugly hack */ margin-left:93%; } } 

The interval is not perfect, but it gives you a starting point for your experiments.

Note: this can be implemented using FlexBox and Grid (when it's ready) much easier - and the latest alpha version of Bootstrap supports flexbox.

Answer 2

I understand that you said that you only prefer the css solution, but, in my opinion, what you are trying to accomplish is not what the bootstrap developers had in mind when they designed their grid. I would use javascript to insert this suction cup where you need it:

jQuery / html / css solution

I changed your columns as 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” the approach to viewing media queries using 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 (which I use to view the width of the screen) CSS

 #hiddenDiv {float:left;} @media only screen and (max-width: 992px){ #hiddenDiv {float:none;} } 

ps. it's good to see how people use drawn scribbles to understand their ideas, that I like to break them down for people: D

Answer 3

I found a smart way to do this. Reorder. Put C to B and then use push and pull to swap

 <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 created a violin with a wrapper div added with a fixed width. For screen size 320, the width of the wrapper has been reduced, and the B div float has been changed to float: right Fiddle here - http://jsfiddle.net/afelixj/2q785vp5/2/