1

我正在使用 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

4

1 回答 1

2

如果不执行一些 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());
            } 
});
于 2013-06-10T16:01:45.527 回答