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

【问题标题】：Change stack order in mobile view at 1140 grid?在 1140 网格的移动视图中更改堆栈顺序？
【发布时间】：2012-08-23 15:46:33
【问题描述】：

我想在我的网站上实施 1140grid。布局很简单：

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

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

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

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

是否有一个简单的纯 CSS 解决方案？

【问题讨论】：

【解决方案1】：

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

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

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

【讨论】：