Question

我有3个这样的元素......： （这就是我想要的，当在大屏幕上时）

3Elements

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

实现它的一种方法是将表格布局用于小尺寸并强制使用＆＃34; C＆＃34;阻止使用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

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

.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的度假元素（用于响应）

4 个答案: