Question

我有这个例子：

这是代码HTML：

<div class="patrat1"></div>
<div class="patrat2"></div>

这是代码CSS：

.patrat1
{
    width:100px;
    height:100px;
    background:blue;
}
.patrat2
{
    width:100px;
    height:100px;
    background:red;
}

@media screen and (max-width: 700px)
{
            //some code to reverse div


}

当窗口小于700px时，我们怎么办才能改变它们之间的位置？红色在上面，蓝色在下面。

这将在不更改HTML，仅限CSS的情况下完成。

http://i60.tinypic.com/x5tg6v.jpg 我把照片更好地理解了

提前致谢！

Answer 1

AFAIK垂直切换位置的唯一方法是使用弹性容器。

<强> CSS ：

.container {
  display: flex;
  flex-direction: column;
}

.patrat1
{
    width:100px;
    height:100px;
    background:blue;

    order: 0;
}
.patrat2
{
    width:100px;
    height:100px;
    background:red;
}

@media screen and (max-width: 700px)
{
  .patrat1 {
    order: 1;
  }
}

<强> HTML ：

<div class="container">
  <div class="patrat1"></div>
  <div class="patrat2"></div>
</div>

实例：http://www.cssdesk.com/usGck

编辑：请注意，您可能需要添加供应商前缀，根据我可以使用：http://caniuse.com/#search=flex

Answer 2

只需在css为max-width

时切换700px

Fiddle

＆＃13;

.patrat1 {
    width:100px;
    height:100px;
    background:blue;
}
.patrat2 {
    width:100px;
    height:100px;
    background:red;
}
@media screen and (max-width: 700px) {
    .patrat2 {
        width:100px;
        height:100px;
        background:blue;
    }
    .patrat1 {
        width:100px;
        height:100px;
        background:red;
    }
}
}

＆＃13;

<div class="patrat1"></div>
<div class="patrat2"></div>

＆＃13;

Answer 3

试试这个Demo。

@media screen and (max-width: 700px) {
    body div {
      display: table-caption;
    }
}

Answer 4

如果你真的想换掉div的位置，你可以尝试这样的事情：

@media screen and (max-width: 700px)
{
.patrat2, .patrat1 {
 float:left;   

}
 .patrat1 {
    margin-top:100px;
}
 .patrat2 {
    margin-left:-100px;
  }
}

Answer 5

尝试以下方式切换div。

＆＃13;

.patrat1
{
    width:100px;
    height:100px;
    background:blue;
}
.patrat2
{
    width:100px;
    height:100px;
    background:red;
}

@media screen and (max-width: 700px)
{
.patrat2{
    position:absolute;
        top:10px;
}
    .patrat1{
    position:absolute;
        top:110px;
}

＆＃13;

<div class="patrat1"></div>
<div class="patrat2"></div>

＆＃13;

检查Fiddle Here.

注意：如果有固定的高度，这个解决方案很好。

在不更改HTML代码的情况下反转站点div位置

5 个答案: