Invert position of container in small devices

Question

I have the following HTML structure:

<div class="container">
    <div class="col-xs-12 col-md-3">
        <div class="row navbar navbar-default">
            A
        </div>
        <div class="row panel panel-default">
            B
        </div>
    </div> 
    <div class="col-xs-12 col-md-9">
        <div class="content">
            C
        </div>
    </div> 
</div>

Which display in larger screens as desired:

______________
| A |        |
|___|   C    |
| B |        |
|___|________|

But in small screens, it display as:

_______
|  A  | 
|  B  |
|  C  |
|_____|

While I need it to display as:

_______
|  B  | 
|  A  |
|  C  |
|_____|

That is, invert the position of A and B, but only in small devices. How can I do it?

I've also made a fiddle here

Thanks in advance.

[Did you check this question](http://stackoverflow.com/questions/18057270/column-order-manipulation-using-col-lg-push-and-col-lg-pull-in-twitter-bootstrap)? — Vucko, Jan 28 '15 at 16:17
@Vucko I've checked, but it doesn't help me. In my case, the containers I wanted to invert position are inside a grid cell, but aren't part of the grid. So `col-xs-pull-` and `col-xs-push-` won't work. — Ortiga, Jan 28 '15 at 17:16

Fabrizio Calderan · Accepted Answer · 2015-01-28T16:34:38.447

You may play with display: table-* inside a mediaquery for small devices, e.g.

.col-md-3 .row {
   height: 100px;
   margin: 0 0 10px 0;
   background: #ccc;
}


@media all and (max-width: 600px) {

    .col-md-3 {
       display: table;
       width: 100%; 
    }

    .panel-default {
       display: table-caption;
    }
}

@media all and (min-width: 1024px) {
   .col-md-3 {
      float: left;
      width: 200px;
      margin-right: 10px;
   }
}

Example: http://codepen.io/anon/pen/pvrRZK

If you define display: table-caption to an element whose parent has display: table the resulting effect is that the element will be placed on top.

Invert position of container in small devices

1 Answers1