Change div rows order in bootstrap 3

Question

Is it possible to change row order in Bootstrap 3, using just css?

Example

<div class="row"><div class="col-lg-12">DIV 1</div></div>
<div class="row"><div class="col-lg-12">DIV 2</div></div>
<div class="row"><div class="col-lg-12">DIV 3</div></div>

I want to place DIV 1 under DIV 2 (on displaying page), but I don't want to change order of HTML.

score 1 · Answer 1 · edited May 23 '17 at 11:58

1

Check out this related question: Bootstrap 3 changing div order on small screens only

The trick is to use col-*-push-* classes.

Here is another related solution: https://stackoverflow.com/a/12069537/584846

It puts content into table-header-group and table-footer-group

edited May 23 '17 at 11:58

Community

1
1

answered Mar 03 '15 at 21:25

Brent Washburne

12,904
4
60
82

It doesn't work on 12-col size, and i need only 12-col size columns. Also, your link is about columns, not rows – Михаил Подрабинек Mar 03 '15 at 21:32
How about the second solution? – Brent Washburne Mar 03 '15 at 21:39
Yes, I've seen it, thank you, but this doesn't suit. Seems to me, that the only way is flexbox model, or js. – Михаил Подрабинек Mar 04 '15 at 14:28
You asked for a solution using just css, though. – Brent Washburne Mar 04 '15 at 14:49

Change div rows order in bootstrap 3

1 Answers1