0

您是否可以仅重新排列整个列的源顺序，或者是否可以在移动视图上重新排列列中的内容块？

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

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

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

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

这是我们目前拥有的代码片段：

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

基本上，Foundation 3 是否为我提供了一种方法来打破其父列并将其显示在移动视图的不同位置？任何解决方法的建议？

4

1 回答 1

0

不，没有开箱即用的方法。而你同事的建议是正确的做法。但我知道这不是最好的，特别是如果您要移动的那个区域有大量内容。但是您可以移动它，而不是复制它。您可以通过 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目标设备的大小。

于 2013-04-04T09:01:11.520 回答