Zurb foundation 根据设备平板电脑或手机重新排列div列的顺序。祖鲁基金会4 我使用Zurb基金会4框架。下面的测试站点在桌面视图中看起来很好。在桌面视图中，我在左侧有：大7列（灰色内容文本框）；在右边：我有：大5列（图1绿色和图2蓝色）。请帮我精确的代码示例。在tablet和phone视图中，我想将div列的顺序重新排列为：首先是image 1绿色框，然后在下面是灰色内容文本框，然后在下面是image 2蓝色框。请帮我精确的代码示例。提前非常感谢

以下是我到目前为止的预览：

---

下面是我希望在tablet和phone view上实现的一个示例：

如果不执行一些jquery或javascript，就无法实现这种布局。没有内置的CSS解决方案，甚至没有基金会的JavaScript，这对你来说是个骗局。p> 你可以试试这个解决方案。首先，您需要有如下布局：

   <div class="row">
        <div class="small-12 columns show-for-small" id="topContent"></div>
        <div class="large-7 small-12 columns panel">1st column</div>
        <div class="large-5 small-12 columns panel">
            <div id="img1" class="panel">img1</div>
            <div id="img2" class="panel">img2</div>
        </div>
    </div>

第一列
img1
img2

然后使用此脚本移动顶部的第一个图像：

$(document).foundation();
$(function () {         
        var wd = $(window).width();
        if (wd < 768) {
            $("#topContent").append($("#img1").detach());
        }        
});

$（document.foundation（）；
$（函数（）{
var wd=$（window.width（）；
如果（wd<768）{
$（“#topContent”）.append（$（“#img1”）.detach（））；
}        
});

请注意，该脚本仅在加载页面时有效，而在调整浏览器大小时无效-我认为您无论如何都不会需要它。但无论出于何种原因，只需将“宽度”逻辑包含在调整大小函数中，如：

$(window).resize(function () {
            var wd = $(window).width();
            if (wd < 768) {
                $("#topContent").append($("#img1").detach());
            } 
});

$（窗口）。调整大小（函数（）{
var wd=$（window.width（）；
如果（wd<768）{
$（“#topContent”）.append（$（“#img1”）.detach（））；
} 
});

谢谢你，冯·v。javascript可能是一个选项，但我更希望有一个css解决方案。基础CSS类：小的显示；以表演为媒介；大屏幕显示。我可以做到这一点，但我担心重复内容，这会不会影响谷歌机器人认为我在试图为排名发送垃圾邮件。例如：img1 Snoring deviceimg2，然后在平板电脑或手机上：Snoring deviceimg2img1看到我是如何重复内容的了吗？这对谷歌机器人不好吗？是的，我知道这项技术，但就像你已经知道的那样，这不是最好的选择。如果要隐藏小内容，这是一个好的选择。如果设计真的需要“移动”内容，我在这里展示的技术就是我一直在做的。有一个推拉方法，但它只在一行中工作，这在你的情况下是不一样的。如果我使用基础方法和重复内容，你知道它会如何影响谷歌机器人吗？谷歌机器人会认为我通过重复内容来获得更高的排名，因此谷歌机器人会惩罚该网站或网页吗？？