Foundation5 源代码排序：内容与侧边栏答案

【问题标题】：Foundation5 source ordering : content vs. sidebarFoundation5 源代码排序：内容与侧边栏
【发布时间】：2014-04-04 05:54:06
【问题描述】：

我在 ZURB Foundation 5 中有一个包含三个列的布局结构，其中两个是侧边栏（左右），中间一个是主要内容区域。

我一直在使用文档的源订购说明，但遇到了一些麻烦。

我试图将这种情况形象化，以便您在一秒钟内了解我想要什么。

这是桌面视图和结构：

这就是我希望它在移动设备上的样子：

有谁知道我将如何实现这一目标？提前致谢。

【问题讨论】：

标签： css responsive-design zurb-foundation frontend

【解决方案1】：

应该是

<div class="row">
  <div class="small-12 medium-6 medium-push-3 columns">Main</div>
  <div class="small-12 medium-3 medium-pull-6 columns">Left Sidebar</div>
  <div class="small-12 medium-3 columns">Right Sidebar</div>
</div>

第一个答案需要使用medium-push-3 而不是medium-push-6 和medium-pull-6 而不是medium-pull-3。

【讨论】：

【解决方案2】：

您可以使用 Foundation 的源排序来更改不同断点处的顺序。

您的 HTML 看起来像这样：

<div class="row">
  <div class="small-12 medium-6 medium-push-6 columns">Main</div>
  <div class="small-12 medium-3 medium-pull-3 columns">Left Sidebar</div>
  <div class="small-12 medium-3 columns">Right Sidebar</div>
</div>

这是demo。

【讨论】：