像源重新排序一样重新排序Div

Question

我使用两个分区。（两个高度都设置为自动）。

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

如果我将margin-left:100%留给左边margin-left:-100% to right，他们就会离开屏幕，水平滚动条会显示在浏览器中。

这是 FIDDLE

Answer 1

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

＆＃13;

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

＆＃13;

＆＃13;

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

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

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

编辑：如果您希望翻转这些代码，请使用以下代码。

＆＃13;

＆＃13;

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%;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;