responsive-design - 3 列(左、主、右)站点，但较小的设备首先是主(主、左、右)

Question

我一直摸不着头脑，但运气不好。设计器有一个包含 3 栏的站点、两个侧边栏和一个主要内容区域。

专为桌面设计，左栏、主要内容、右栏。但是，在较小的设备上，我们希望首先堆叠主要内容。

所以通常情况下，你可以通过以下方式让它工作

<div id="left" style="float:left;">...</div>
<div id="right" style="float:right;">...</div>
<div id="main" style="margin-left:[width of left col];">...</div>

或

<div id="left" style="float:left;">...</div>
<div id="main" style="float:left;">...</div>
<div id="right" style="float:left;">...</div>

但这并不能解决在响应时让主要内容区域先出现的问题。我唯一的解决方案是首先使用 main 标记:

<div id="main">...</div> 
<div id="left">...</div>
<div id="right">...</div>

但我无法为桌面设置样式，因为这些 div 的高度未知。

有什么想法吗？太多了？

谢谢。

Answer 1

This layout来自优秀Responsive Patterns site似乎就是您要找的东西。