Vertical gap between Bootstrap columns

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.