html - Foundation 5 网格推拉

Question

我正在使用 Foundation 5 并尝试在移动屏幕上实现以下 DIV 布局:

--------------------
|        A         |
--------------------
|        B         |
--------------------
|        C         |
--------------------
|        D         |
--------------------
|        E         |
--------------------

我希望它在桌面屏幕上显示如下:

--------------------------------
|                              |
|              A               |
|                              |
--------------------------------
|                  |           |
|        B         |           |
|                  |           |
--------------------     E     |
|                  |           |
|        C         |           |
|                  |           |
--------------------------------
|                              |
|              D               |
|                              |
--------------------------------

有人知道怎么做吗？

目前我有三行:一排用于 A，一排用于 B、C 和 E，一排用于 D。我一直在尝试推拉以在移动 View 上重新排序 D 和 E，但我可以' 似乎是这样做的，因为它们在不同的行中。

请注意，DIV 的内容是动态的，因此我无法使用绝对定位在移动设备上切换 DIV。

非常感谢。

Answer 1

一个选项是加载一个普通的网页，如果桌面要加载您的网页，下面的 html 代码将实现您所需要的。

<div class="row">
    <div class="large-12 columns">
        A
    </div>
</div>

<div class="row">
    <div class="large-x columns">
        <div class="row">
            <div class = "large-12 columns">
                B
            </div>
        </div>
        <div class="row">
            <div class = "large-12 columns">
                C
            </div>
        </div>

    <div class="large-(12-x) columns">
        E
    </div>
</div>

<div class="row">
    <div class = "large-12 columns">
        D
    </div>
</div>

如果您需要根据页面是否由移动设备访问来更改它，您将需要一个脚本来检测它。我建议调查 userAgent .已经有一个问题使用 userAgent 来检测这个 here .一旦您收到移动浏览器确实正在访问它的信号，您就可以使用简单的 jQuery 命令来动态操作 DOM。