Responsive design ZURB基金会源排序——从侧栏中删除一篇文章

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

我正在与基金会3一起工作，我试图改变手机上某些内容的源代码顺序。我从文档中了解推式移动和拉式移动是如何工作的，但需要做一些不同的事情

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

但是，.four.column侧边栏中有一个，我需要在移动视图中的main content.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是否为我提供了一个打破它的父列并在移动视图中显示不同位置的方法？有什么解决办法的建议吗？

没有现成的方法。你同事的建议是正确的做法。但我知道这不是最好的，特别是如果你想移动的区域有大量内容。但是你可以移动它，而不是复制它。您可以通过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>

主要内容
一些内容

中间内容

更多内容

脚本

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

var mainContent=$（“#mainContent”）；
var边栏=$（“#边栏”）；
var mobiMiddle=$（“#mobiMiddle”）；
var mainPh=$（“#mainPh”）；
var firstSidebar=$（“#firstSidebar”）；
$（document.foundation（）；
$（文档）.ready（函数（）{
});
$（窗口）。调整大小（函数（）{
var wd=$（window.width（）；
如果（wd<768）{
mainPh.prepend（mobiMiddle.detach（））；
}
否则{
firstSidebar.after（mobiMiddle.detach（））；
}
});

您可以将

768

更改为目标设备的大小