css - 在小型设备中反转容器的位置

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

您可以在小型设备的媒体查询中使用 display: 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 的元素，则结果效果是该元素将放置在顶部。