Foundation5源排序：内容与侧边栏

Question

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

我一直在玩弄文档的源顺序指令，但有一些麻烦。

我试图想象的情况，这样你能明白我想在第二。

这是桌面视图和结构：

，这是我希望它看起来像手机：

有谁知道我该怎么做到这一点？ 在此先感谢。

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

Answer 2

您可以使用基金会的源顺序改变，在不同的断点的顺序。

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