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

Question

我有这个例子:

https://jsfiddle.net/vz9cean1/

这是 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的方 block 之间如何改变它们的位置？上方为红色，下方为蓝色。

这将在不更改 HTML 和 CSS 的情况下完成。

http://i60.tinypic.com/x5tg6v.jpg我放个图更好理解

提前致谢!

Answer 1

据我所知，垂直切换位置的唯一方法是使用 flex 容器。

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