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的元素，则生成的效果是该元素将位于顶部。

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

1 个答案: