基础源排序：内容和。侧边栏

Question

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

我一直在玩文档的源代码说明，但遇到了一些麻烦。

我试图想象这种情况，这样你就能在一秒钟内理解我想要的东西。

这是桌面视图和结构：

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

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

Answer 1

您可以使用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 。

Answer 2

这将是

<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。