Vertical grid of orders in bootstrap

Question

I want to change the column order only in xs devices with bootstrap, this is what I got

<div class="container"> <div class="row"> <div class="col-lg-7 col-md-7 col-sm-7 col-xs-12">column left</div> <div class="col-lg-5 col-md-5 col-sm-5 col-xs-12"> <div>Column right nro 1</div> <div>Column right nro 2</div> </div> </div> 

I want to focus on the right column, only on xs devices do I have them inverted, showing the first column on the right of nro 2, and then the column on the right of nro 1 .

Fiddle

Answer 1

One way to do this is to use the display: table and caption-side property and wrap these properties in xs-media rules:

 @media (max-width: 768px) { .col-right { display: table; } .col-right > div:nth-child(2) { display: table-caption; margin: 0 15px; } } 

Demo: http://jsfiddle.net/fhn6b6gb/1/