CSS 的度假村元素（用于响应式）

Question

我有 3 个这样的元素...:[=46=] （这就是我想要的，在大屏幕上 ✓ ）

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" , 并且都带有 width:100%;

可能与 纯 CSS？没有 JS/jQuery 技巧？怎么样？

也可以改变HTML的模式

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

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

Answer 1

实现它的一种方法是对小尺寸使用 table-layout 并在底部位置强制 "C" 块渲染 caption-side 属性:

@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 块的包装元素。

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

Answer 2

假设您有一个共同的 #wrapper 元素，您可以使用 CSS3 解决方案，其中 display: flex 定义元素的出现顺序：http://jsfiddle.net/njfcefqd/

CSS

@media(max-width:450px){

    #wrapper {
       display: flex;
       flex-direction: column;
    }

    .a, .b {
        float: none;
        width:100%;
    }
    .a { order: 1; }
    .b { order: 3; }
    .c { order: 2; }
}

Answer 3

您可以使用带有在小@media 上显示列的选项的 flexbox：

.a {
    float: right;
    width: 50%;
    height: 100px;
    background: #a22020;
}
.b {
    float: left;
    width: 50%;
    height: 100px;
    background: #20a260;
}
.c {
    float: left;
    width: 100%;
    height: 150px;
    background: #204ba2;
}

@media(max-width:450px){

.flex{
    display:flex;
    flex-direction:column ;
}
  .a {
        float: none;
        width:100%;
    order: 1;
    }
.b {
        float: none;
        width:100%;
    order: 3;
    }
.c{
        float: none;
        width:100%;
    order: 2;
    }
}

或检查fiddle

Answer 4

这是另一种方法

.hidden{display:none;}

.a {
    float: right;
    width: 50%;
    height: 100px;
    background: #a22020;
}
.b {
    float: left;
    width: 50%;
    height: 100px;
    background: #20a260;
}
.c {
    float: left;
    width: 100%;
    height: 150px;
    background: #204ba2;
}

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



.a,.b,.c {font-size:35px;color:#fff;text-align:center;padding-top:60px;}

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

CSS 的度假村元素（用于响应式）

Resort elements by CSS (for responsive)

html

css

sorting

responsive-design