Foundation 5 网格推拉

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

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

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

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

有人知道怎么做这个吗？

目前我有三行：一行用于 A，一行用于 B、C 和 E，一行用于 D。我一直在尝试通过“推”和“拉”在移动视图上重新排序 D 和 E，但我似乎无法执行此操作，因为它们位于不同的行中。

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

提前谢谢了。

一种选择是加载一个普通网页，如果桌面要加载您的网页，下面的 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>

如果您需要根据页面是否由移动设备访问来更改它，您将需要一个脚本来检测它。我建议调查一下用户代理 https://developer.mozilla.org/en-US/docs/Web/API/NavigatorID.userAgent。使用 userAgent 检测此问题已经存在一个问题here https://stackoverflow.com/questions/3514784/what-is-the-best-way-to-detect-a-handheld-device-in-jquery。一旦您收到移动浏览器确实正在访问它的信号，您就可以使用简单的 jQuery 命令来动态操作 DOM。