重新排序Div像源重新排序

Question

我正在使用两个部门（两个高度设置为自动）。

现在，在移动视图中，我希望左侧视图为100％宽度，底部和右侧视图为100％并位于顶部;怎么能做到这一点？

如果我将margin-left:100%设置为左侧而margin-left:-100% to right则设置为离屏，水平滚动条显示在浏览器中。

这里是 FIDDLE

Answer 1

下面是使用完全相同的HTML的例子。只有CSS正在改变，这可以通过媒体查询完成。

html, body{ height:100%; width:100%; margin:0; padding:0 } 
 

 
#red{ 
 
    background:red; height:40%; width:50%; float:left; 
 
} 
 

 
#yellow{ 
 
    background:yellow; height:40%; width:50%; float:left; 
 
}

<div id="yellow"></div><div id="red"></div>

html, body{ height:100%; width:100%; margin:0; padding:0 } 
 

 
#red{ 
 
    background:red; height:40%; width:100%; 
 
} 
 

 
#yellow{ 
 
    background:yellow; height:40%; width:100%; 
 
}

<div id="yellow"></div><div id="red"></div>

编辑：使用，如果你希望它们翻转下面的代码。

html, body{ height:100%; width:100%; margin:0; padding:0 } 
 

 
#red{ 
 
    background:red; height:40%; width:100%; 
 
    position:relative; 
 
    top:-40%; 
 
} 
 

 
#yellow{ 
 
    background:yellow; height:40%; width:100%; 
 
    position:relative; 
 
    top:40%; 
 
}

<div id="yellow"></div><div id="red"></div>