6

Can someone help me with the html to reorder columns below using bootstrap 3:

 ----- ----- -----
|  1  |  2  |  3  |
 ----- ----- -----

To this:

 -----
|  2  |
 -----
|  1  |
 -----
|  3  |
 -----

I know this has something to do with push/pull I just cant to seem to get it right.

Edit

And som code that i can't get to work:

<div class="row">
    <div class="col-md-8 col-xs-12">2</div>
    <div class="col-md-2 col-xs-12 col-md-push-2">1</div>
    <div class="col-md-8 col-xs-12 col-md-pull-2">3</div>
</div>

On mobile it looks good but not on desktop.

Solution

<div class="row">
    <div class="col-md-8 col-xs-12 col-md-push-2">2</div>
    <div class="col-md-2 col-xs-12 col-md-pull-8">1</div>
    <div class="col-md-8 col-xs-12">3</div>
</div>
Martin Overgaard
  • 355
  • 2
  • 7
  • 21
  • have you tried to do it , can you post some code – bmscomp May 26 '15 at 12:32
  • think mobile first and place div-2 first. http://stackoverflow.com/questions/26466407/twitter-bootstrap-column-ordering-for-full-width-divs/26466793#26466793 – tmg May 26 '15 at 12:33
  • I usually end up breaking them into duplicate divs, so the "1" up above would have the class hidden-xs and a duplicate for down below has the class visible-xs. Make sense? – stackoverfloweth May 26 '15 at 12:34
  • I faced the same problem time ago. Try this, sure it helps you: http://stackoverflow.com/questions/20171408/how-do-i-change-bootstrap-3-column-order-on-mobile-layout – Nacho Ramos Sánchez May 26 '15 at 12:34
  • You want just with Bootstrap or CSS solution would do? – m4n0 May 26 '15 at 12:36
  • 1
    Check this out - https://scotch.io/tutorials/reorder-css-columns-using-bootstrap – Luís P. A. May 26 '15 at 12:38

2 Answers2

5

This is pretty straightforward, they key point is that we cannot reorder the columns in mobile mode. We should think of it as mobile first, then reorder the columns on larger screens using .col-*-push-#, .col-*-pull-# helper classes:

.red {
    background: red;
}
.blue {
    background: blue;
}
.green {
    background: green;
}
<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
    <div class="row">
        <div class="red col-sm-4 col-sm-push-4">2</div>
        <div class="green col-sm-4 col-sm-pull-4">1</div>
        <div class="blue col-sm-4">3</div>
    </div>
</div>
Hashem Qolami
  • 97,268
  • 26
  • 150
  • 164
1

Use a custom class for each and use the flex box CSS concept.

HTML

<div class="row">
  <div class="col-md-4 one">First box</div>
  <div class="col-md-4 two">Second Box</div>
  <div class="col-md-4 three">Third Box</div>
</div>

CSS

.row {
  display: flex;
  flex-direction: column;
}

.one {
  order: 2;
}

.two {
  order: 1;
}

.three {
  order: 3;
}

Codeply

m4n0
  • 29,823
  • 27
  • 76
  • 89