html - 带有错误顺序的媒体查询的并排 Divs

Question

我确信这很明显......但我似乎无法弄清楚。

我有两个 div，当媒体宽度较小时，我需要将它们放在一起，而当媒体宽度较大时，它们需要放在一起。右边是固定宽度，左边是可变的。但是，当介质宽度较小时，它们会以错误的顺序结束。如果我在 html 中交换 div，它们不再排列得很好。

这是小提琴。http://jsfiddle.net/CwMTU/2/

HTML

<div class="right"> right content fixed width </div>

<div class="left"> left navbar variable width </div>

CSS

.right {
    width: 200px;
    float: right;}

.left{
    margin-right: 200px;}


@media (max-width: 500px) {       
.left {
    width: 100%;}

.right { 
    width: 100%;}
}

Answer 1

我只是使用额外的包装器 div 和display:table/table-cell（设置回阻止媒体查询）

http://jsfiddle.net/CwMTU/4/

Answer 2

改变<div>'s 的顺序

<div class="left">
   left navbar variable width
</div>

<div class="right">
    right content fixed width
</div>

并更改float两个类中的 .. 添加 awidth:100%;和 a margin-rightof -200px，让您的正确 div 靠近它。

.right {
    width: 200px;
    float: left;
    background:green;
}

.left{
    background:red;
    float:left;
    width:100%;
    margin-right:-200px;

}

JsFiddle 更新如下：

@media (max-width: 500px) {

.left {
    width: 100%;
    margin-right:0;             <--------
}

您的JsFiddle但已更新