How to reorder rows in Bootstrap 3

Question

Firstly, I saw many threads about this question like Here and Here. But the problem is not solved!

I need to reorder two rows. I have this :

HTML :

<div class="row first-row">
  <div class="col-xs-6">Col-1</div>
  <div class="col-xs-6">Col-2</div>
</div>
<div class="row second-row">
  <div class="col-xs-6">Col-3</div>
  <div class="col-xs-6">Col-4</div>
</div>

DEMO

I need to reorder first-row with second-row.

Any help would be appreciated.

@ElenaSemenchenko, it's just worth mentioning that this is still not fully supported by all modern browsers. http://caniuse.com/#search=flexbox — Jakub Matczak, Sep 02 '16 at 08:08

score 3 · Accepted Answer · answered Sep 02 '16 at 08:24

If you have a div wrapping the rows you can use this:

.wrapper {
  width: 100%;
  display: table;
}

.first-row {
  background: blue;
  display: table-row-group;
}

.second-row {
  background: red;
  display: table-header-group;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="wrapper">
  <div class="row first-row">
    <div class="col-xs-6">
      Col-1
    </div>
    <div class="col-xs-6">
      Col-2
    </div>
  </div>
  <div class="row second-row">
    <div class="col-xs-6">
      Col-3
    </div>
    <div class="col-xs-6">
      Col-4
    </div>
  </div>
</div>

score 2 · Answer 2 · answered Sep 02 '16 at 08:02

Here is a nifty little trick to reverse the order of child elements, wrap it around your rows:

.reverse-order {
    -webkit-transform: scaleY(-1);
    -moz-transform: scaleY(-1);
    -o-transform: scaleY(-1);
    -ms-transform: scaleY(-1);
    transform: scaleY(-1);
}

.reverse-order > div,
.reverse-order > span,
.reverse-order > li {
    -webkit-transform: scaleY(-1);
    -moz-transform: scaleY(-1);
    -o-transform: scaleY(-1);
    -ms-transform: scaleY(-1);
    transform: scaleY(-1);
}

JSFiddle

What it does: It simply flips each child element vertically, and flips the whole thing again. This works only vertically though. Horizontally you should work with -push and -pull

score -1 · Answer 3 · answered Sep 02 '16 at 08:00

You can make the first-row positioned absolute, and push it to the bottom

CSS

.container {
  padding: 0;
  position: relative;
}

.first-row {
  background: blue;
  position: absolute;
  top: 100%;
  width: 100%;
}

.second-row {
  background: red;
}

HTML

<div class="container">
  <div class="row first-row">
    <div class="col-xs-6">Col-1</div>
    <div class="col-xs-6">Col-2</div>
  </div>
  <div class="row second-row">
    <div class="col-xs-6">Col-3</div>
    <div class="col-xs-6">Col-4</div>
  </div>
</div>

How to reorder rows in Bootstrap 3

3 Answers3