Responsive design 是否有可能对无序元件进行响应性设计？

当屏幕分辨率>1000px时，A、B和C分别为280、350和210px）

当它收缩时，我希望它是B max width，后面是A和C聚集在一个div中并收缩。我不确定我是否可以用直接的CSS来实现这一点，因为元素的顺序不正确——或者我在这里错了吗？谢谢

---

您可以使用CSS3这样做。但这依赖于一旦页面宽度小于1000px，rowA就处于绝对位置。还有其他的解决方法，可以使用js动态地更改它的边距顶部，这样无论内容高度如何更改，col A都会保持它的位置

    .body{ margin:0;padding:0;
}
#rowA {
    width:25%;
    float:left;
    //margin:10px;
    min-height:340px;
    margin:0;padding:0;
    background-color: blue;
}
#rowB {
    width:50%;
    float:left;
    //margin:10px;
    min-height:340px;
    margin:0;padding:0;
    background-color: red;
}
#rowC {
    //border:1px solid #000;
    width:25%;
    float:left;
    //margin:10px;
    min-height:340px;
    margin:0;padding:0;
    background-color: blue;
}
#colA, #colB, #colC {

    min-height:330px;
    margin:5px;padding:0;
    background-color: green;
    text-align:center;
}

@media (max-width: 1000px) {
    #rowB {
        width:100%;
        clear:left;
    }
    #rowA {
        width:50%;
        position:absolute;
        margin-top:340px;
    }
    #rowC {
        width:50%;
        clear:left;
        float:right;
    }

}

体内标签

    <div class="grid">
<span id="rowA"><div id="colA">col A</div></span><span id="rowB"><div id="colB">col B</div></span><span id="rowC"><div id="colC">col C</div></span>

乙酰水杨酸