CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3
tedw
tedw

Reputation: 471

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

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.

Upvotes: 5

Views: 5066

Answers (2)

dippas
dippas

Reputation: 60563

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>

`

Upvotes: 8

kimchicode
kimchicode

Reputation: 34

You actually got it right.

<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>

Make sure each div the the same height for them to line up accordingly.

Upvotes: 0

Related Questions