html - 左 Div 应移至右 Div 下方

Question

我有两个 div:左边一个宽度固定 (#Sidebar)，右边一个填充剩余空间 (#Content)。现在，当我调整视口(viewport)大小时，我希望左侧 div (#Sidebar) 移动到右侧 (#Content) 下方。

请注意，在我的真实场景中，Sidebar 和 Content Divs 都具有动态高度。

这是我当前的代码:

HTML:

 <div id="sidebar"></div>
 <div id="content"></div>

CSS:

 #sidebar { 
 float: left; 
 background: #CCC; height: 100px;width: 100px;}

 #content {
 margin-left: 110px;
 background: #111; height: 100px;}

 @media screen and (max-width: 500px){
 #content {
 width: 100%; 
 margin-left: 0px;
 clear: both;
 }}

在这里观看:http://jsfiddle.net/faz88ayh/=> 左侧的 Div (#Sidebar) 将始终位于顶部。

我想要的效果可以通过 bootstrap 实现，但它不支持固定宽度和可变宽度列的组合。=> http://jsfiddle.net/faz88ayh/1/(您必须调整结果窗口的大小才能看到效果)

请帮忙!

Answer 1

在 fiddle 中更改 css

#sidebar {
float: left;
background: #CCC;
height: 100px;
width: 100%
}
#content {
background: #111;
height: 100px;
width:100%;
} 

http://jsfiddle.net/faz88ayh/15/