html - CSS Resort 元素(用于响应式)

Question

我有 3 个这样的元素...: (这就是我想要的，在大屏幕上 ✓ )

HTML :

<div class="a">A</div>
<div class="b">B</div>
<div class="c">C</div>

CSS:

.a {
    float: right;
    width: 50%;
    height: 100px;
    background: red;
}
.b {
    float: left;
    width: 50%;
    height: 100px;
    background: green;
}
.c {
    float: left;
    width: 100%;
    height: 150px;
    background: blue;
}

---

但问题是在小屏幕上，我想像 "A,C,B" 而不是 "A,B,C" 那样求助，并且都用宽度:100%;

• 可以使用纯 CSS 吗？没有 JS/jQuery 技巧？怎么办？

• 也可以改变 HTML 的模式

---

演示: http://jsfiddle.net/oy4sc4jd/

@media(max-width:450px){
    .a, .b {
        float: none;
        width:100%;
    }
}

Answer 1

实现它的一种方法是对小尺寸使用表格布局，并使用 caption-side 属性强制“C” block 呈现在底部位置:

@media(max-width:450px){
    .a, .b {
        float: none;
        width:100%;
    }
    .container {
        display: table;
        width: 100%;
    }
    .b {
        display: table-caption;
        caption-side: bottom;
        width: 100%;
    }
}

.container 是 A-B-C block 的包装元素。

演示: http://jsfiddle.net/oy4sc4jd/2/