How can I "wrap" divs with Twitter Bootstrap 3?

Question

For "sm" and smaller I want the divs to display as:

[ A ]
[ B ]
[ C ]
[ D ]
[ E ]
[ F ]

For "md" and bigger I want the divs to display as:

[ A ] [ D ]
[ B ] [ E ]
[ C ] [ F ]

where A is aligned with D, B is aligned with E, C is aligned with F, etc.

Is this possible with Bootstrap?

I realize I could do:

<div class="col-md-6">
  <div id="A"></div>
  <div id="B"></div>
  <div id="C"></div>
</div>
<div class="col-md-6">
  <div id="D"></div>
  <div id="E"></div>
  <div id="F"></div>
</div>

...but this doesn't ensure that B is aligned with E, e.g. when A is taller than D.

Answer 1

just add col-xs-12 (this will work in extra small and small devices) to current col-md-6

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-xs-12 col-md-6">
      <div id="A">a</div>
      <div id="B">b</div>
      <div id="C">c</div>
    </div>
    <div class="col-xs-12 col-md-6">
      <div id="D">d</div>
      <div id="E">e</div>
      <div id="F">f</div>
    </div>
  </div>
</div>

But

if you want to have them aligned by height (aka equal height), then you need to have them in the same parent, otherwise you can't AFAIK, and using clear:left at each odd number or (2n+1)

Or

using

.row {
  display: flex;
  flex-wrap: wrap;
}

to have the visual effect (i.e - when using border)

Note

If you don't like how they are sorted, you can use order from flexbox to change their order.

so here is a example with the order already (and a simpler version with clear:left only)

/*visual effect demo*/

.row > div {
  border: 1px solid black;
}
/* EX1- full example */

@media (min-width: 992px) {
  .ex1 .row {
    display: flex;
    flex-wrap: wrap;
  }
  .ex1 #B {
    order: 3
  }
  .ex1 #C {
    order: 5
  }
  .ex1 #D {
    order: 2
  }
  .ex1 #E {
    order: 4
  }
  .ex1 #F {
    order: 6
  }
}
/* EX2 - just to heave the same height without same height in visual effects*/

.ex2 .row > div:nth-of-type(2n+1) {
  clear: left
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container ex1">
  <div class="row">
    <div id="A" class="col-xs-12 col-md-6">a</div>
    <div id="B" class="col-xs-12 col-md-6">b</div>
    <div id="C" class="col-xs-12 col-md-6">c</div>
    <div id="D" class="col-xs-12 col-md-6">ddd ddd ddd ddd ddd ddd ddd ddd ddd ddd ddd ddd ddd ddd ddd ddd ddd ddd ddd ddd ddd ddd ddd ddd ddd ddd ddd ddd ddd ddd ddd ddd ddd ddd ddd ddd ddd ddd ddd ddd ddd ddd</div>
    <div id="E" class="col-xs-12 col-md-6">e</div>
    <div id="F" class="col-xs-12 col-md-6">f</div>
  </div>
</div>
<hr />
<div class="container ex2">
  <div class="row">
    <div id="A" class="col-xs-12 col-md-6">a</div>
    <div id="B" class="col-xs-12 col-md-6">b</div>
    <div id="C" class="col-xs-12 col-md-6">c</div>
    <div id="D" class="col-xs-12 col-md-6">ddd ddd ddd ddd ddd ddd ddd ddd ddd ddd ddd ddd ddd ddd ddd ddd ddd ddd ddd ddd ddd ddd ddd ddd ddd ddd ddd ddd ddd ddd ddd ddd ddd ddd ddd ddd ddd ddd ddd ddd ddd ddd</div>
    <div id="E" class="col-xs-12 col-md-6">e</div>
    <div id="F" class="col-xs-12 col-md-6">f</div>
  </div>
</div>

`