根据设备平板电脑或手机重新排列 div 列的顺序。 zurb 基金会 4

Posted 2023-02-25

【中文标题】根据设备平板电脑或手机重新排列 div 列的顺序。 zurb 基金会 4

【英文标题】：rearrange order of div columns according to device tablet or phone. zurb foundation 4

【发布时间】：2013-06-10 15:46:11

【问题描述】：

我正在使用 zurb Foundation 4 框架。以下测试站点在我的桌面视图中看起来不错。在桌面视图中，我在左侧有：大 7 列（灰色内容文本框）；在右侧：我有：大 5 列（图像 1 绿色和图像 2 蓝色）。请帮助我提供确切的代码示例。在平板电脑和手机视图上，我想将 div 列的顺序重新排列为：首先是图像 1 绿色框，然后是灰色内容文本框，然后是图像 2 蓝色框。请帮助我提供确切的代码示例。提前非常感谢您！

这是我目前所拥有的预览：http://www.endsnore.com/_test1/marketing5.html

这是我希望在平板电脑和手机视图上发生的示例：http://www.endsnore.com/_test1/images/_delete14.jpg

【参考方案1】：

如果不执行一些 jquery 或 javascript，您将无法拥有该布局。没有内置的 css 解决方案，甚至没有来自 Foundation 的 javascript 可以为您解决问题。

您可以尝试此解决方案。首先你需要有这样的布局：

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

然后让这个脚本将第一张图片移到顶部：

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

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

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

【讨论】：

thank you von v. javascript 可能是一个选项，但我宁愿有一个 css 解决方案。基础 CSS 类呢：show-for-small；以媒体形式展示；大型演出。我可以这样做，但我担心重复内容，这是否会影响谷歌机器人认为我正在尝试发送垃圾内容以进行排名。

例如：img1

img2 img1 看看我是如何重复内容的？这对谷歌机器人没有好处吗？

是的，我知道这种技术，但就像您已经知道它不是最佳选择一样。如果您要隐藏小内容，这只是一个不错的选择。如果设计确实需要“移动”内容，我在这里展示的技术就是我一直在做的事情。有一种推拉方法，但只能在一行中使用，在您的情况下不一样。

如果我使用基础方法并重复内容，你知道它会如何影响谷歌机器人吗？谷歌机器人是否会认为我通过重复内容来获得更高的排名是在发送垃圾内容，因此谷歌机器人会惩罚网站或网页？？