Twitter Bootstrap Question posted in

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.

Tags:

2

Answers


  1. 0

    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>

    `

    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search