css - 使用 css 来完成这个布局

Question

我有一个响应式设计网站，在媒体查询后更改了奇怪的布局，需要我重新排序某些项目的布局：基本上我有 4 个部分，a、b、c、d 所以 A 是左列 B 是右列column 和 c 和 d 在下面是它们自己的行（* 表示换行）* A | B * C * D 然后我需要按此顺序将其重新排序为 4 个不同的行 * A * C * B * D 我可以使用 Javascript jQuery 重新排序事物，但现在更愿意依赖它，所以我正在寻找一个所有的 CSS 解决方案，PHP 解决方案，最后如果一切都不是可能的 Javascript/jQuery 解决方案。

Answer 1

干得好

HTML：

<div id="a"></div>
<div id="b"></div>
<div id="c"></div>
<div id="d"></div>​

CSS

#a { background-color: #aaa; }
#b { background-color: #bbb; }
#c { background-color: #ccc; }
#d { background-color: #ddd; }

div { 
    height: 100px;
    width: 100%;
}

@media 
  screen and (min-width: 420px) {
    div { position: absolute; }
    #a{ 
       width: 50%;
    }

    #b { 
      top: 100px;
    }

    #c {
      left: 50%;
      width: 50%;
    }

    #d { 
      top: 200px;
    }
}
​