响应4节布局

Question

我的网站有一个主要部分，一个底部栏包含按钮，然后是两个信息部分。当设备处于横向模式时，我希望主要部分位于左侧，两个额外部分垂直堆叠在右侧，底部栏位于底部。像这样：

当设备保持纵向时，我希望主要部分位于中间，两个额外部分垂直堆叠在其上方，底部栏位于底部。像这样：

在每一个中，主要部分需要调整大小尽可能大（图片有点误导）。我已经能够使用表格自己实现每一个，但是，我想避免必须拥有两个副本的所有内容，只是在旋转屏幕时隐藏一个或另一个。

是否有一种很好的方法可以使这项工作？我已经在使用jQuery，所以我不反对使用它，但理想情况下，如果我能用纯CSS做到那就太棒了。

P.S。它是一个Web应用程序，因此它需要在没有任何滚动条的情况下填满整个屏幕。

Answer 1

你可以用CSS解决这个问题，没问题。

定义第二个布局启动的分辨率，并使用该分辨率的媒体查询浮动您的主要区域左侧和两个信息部分。对所有这些使用％宽度。

更简单的方法是使用Twitter Bootstrap并使用网格定义这些布局。