css - 在 1140 网格的移动视图中更改堆栈顺序？

Question

我想在我的站点上实现 1140grid。布局非常简单：

100% header
25% sidebar 75% page
100% footer

另见http://jsfiddle.net/KB5Nq/

问题是我想在网站处于移动视图时更改堆栈顺序：

100% header
100% page
100% sidebar
100% footer

但是，默认情况下，它会按照它们在源代码中出现的顺序排列块：页眉、侧边栏、页面、页脚。

是否有一个简单的仅 css 修复？

Answer 1

你可以试试这个。重新排序文档流中的 Main 和 Sidebar 以及具有负边距的 hack 框架样式：

.container .eightcol {margin-left:34.55% !important;}
.container .fourcol {margin-left:-100% !important;}

http://jsfiddle.net/KB5Nq/2/

尽管如此，我还是不建议首先使用不能满足您需求的黑客框架。对于简单的布局，有时编写干净整洁的 vanilla 代码会更快。