将div折叠为100％的iphone布局

Question

如果我还没有花费数小时挖掘文件和进行研究，我真的不会发布一个问题。我一定不知道我在找什么： - |

我想知道当响应式设计缩放到iphone尺寸时，容器（或容器本身）中的div如何以及为什么可以更改为100％宽度 - 如下所示：

http://demo2.woothemes.com/whitelight/about/

侧边栏位于主要内容的下方，然后内部的div延伸至100％

这让我绝对生气！任何帮助/方向必须赞赏：）

Answer 1

基本媒体查询响应式布局示例：

演示：http://jsbin.com/ayojan/1/edit

调整浏览器大小以查看效果。

div {
  outline:solid black;
}
.content {
  width:80%;
  float:left;
}
.sidebar {
  width:20%;
  float:left;
}

@media only screen and (max-width: 767px) {
  .sidebar {
    width:100%;
    float:none;
}
  .content {
    width:100%;
    float:none;
  }

}

关键点：在媒体查询内部释放元素（float：none）并将它们设置为宽度：100％;