Question

您是否只能重新排列整列的源顺序，还是可以在移动视图的列中重新排列内容块？

我正在与Foundation 3合作，我正在尝试更改移动设备上某些内容的来源顺序。我从文档中了解到push - ＃ - mobile和pull - ＃ - mobile是如何工作的，但需要做一些与众不同的事情。

我们有一个两列的桌面布局：.eight.column用于主要内容，.four.column用于侧边栏。在移动设备中，侧边栏显示在主要内容下方。

但是，我需要在.four.column侧边栏中显示移动视图中主要内容.eight.column的上方。侧栏中的其他块仍应显示在主要内容下方。

一位同事提出的一个建议是在主要内容之上制作一个重复的内容块，这个内容是隐藏的，并使侧边栏隐藏为小型。我希望基金会有更好的选择，不会让我重复代码。

以下是我们目前所拥有的代码段：

    <section class="eight column">
        <article>main content</article>
    </section>

    <aside class="sidebar four column">
       <article>Some content</article>

       <article class="first-in-mobile"> This should be above the main content in mobile view
       </article>

       <article>Some more content</article>

    </aside>

基本上，基金会3是否为我提供了一种方法来突破其父列并在移动视图中的不同位置显示它？有关解决方法的任何建议吗？

Answer 1

没有开箱即用的方式。而你同事的建议是正确的做法。但我知道这不是最好的，特别是如果你想要移动的那个区域有大量的内容。但你可以移动它，而不是重复它。你可以通过css或jquery来做到这一点。我更喜欢后者用于您的特定情况：

布局

<div class="row" id="mainPh">
    <div class="large-8 columns" id="mainContent">
        <h1>Main content</h1>

    </div>

    <div class="large-4 columns" id="sidebar">
        <div class="panel" id="firstSidebar">
            <p>Some content</p>
        </div>
        <div class="panel" id="mobiMiddle">
            <p>Middle content</p>               
        </div>
        <div class="panel">
            <p>Some more content</p>
        </div>
    </div>
</div>

脚本

<script type="text/javascript">    
    var mainContent = $("#mainContent");
    var sidebar = $("#sidebar");
    var mobiMiddle = $("#mobiMiddle");
    var mainPh = $("#mainPh");
    var firstSidebar = $("#firstSidebar");

    $(document).foundation();
    $(document).ready(function () {        

    });
    $(window).resize(function () {
        var wd = $(window).width();        
        if (wd < 768) {            
            mainPh.prepend(mobiMiddle.detach());
        }
        else {                                    
            firstSidebar.after(mobiMiddle.detach());
        }
    });
</script>

您可以将768更改为您定位的设备尺寸。

Zurb基金会来源订购 - 打破侧栏专栏文章

1 个答案: