Invert положения контейнера в небольших устройствах

Question

У меня есть следующий HTML структура:

<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> 

, которые показывают в больших экранах по желанию:

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

Но в маленьких экранах, это отображение, как:

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

Пока мне это нужно, чтобы показать как:

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

То есть, инвертируйте положение A и B, но только на небольших устройствах. Как мне это сделать?

I've also made a fiddle here

Спасибо заранее.

Answer 1

Вы можете играть с дисплеем: table-* внутри медиазаписей для небольших устройств, например.

.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; 
    } 
} 

Пример: http://codepen.io/anon/pen/pvrRZK

Если определить display: table-caption к элементу которого родитель имеет display: table результирующий эффект является то, что элемент будет размещен на вершине.