Foundation 5 Grid Push Pull

问题

I'm using Foundation 5 and I'm trying to achieve the following DIV layout on a mobile screen:

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

and I'd like this to display as the following on a desktop screen:

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

Does anybody know how to do this?

At the moment I've got three rows: one for A, one for B,C & E and one for D. I've been trying Push and Pull to reorder D & E on the mobile view, but I can't seem to do this as they are in different rows.

Note that the content of the DIVs is dynamic so I can't use absolute positioning to switch the DIVs around on the mobile.

Many thanks in advance.

回答1:

One option would be to have a normal webpage to be loaded, the html code below would achieve what you need if a desktop were to load your webpage.

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

If you need to change it based off of if the page is accessed by a mobile device, you'll need a script to detect that. I would recommend looking into userAgent. There is already a question using userAgent to detect this here. Once you get the signal that it is indeed being accessed by a mobile browser, you can use simple jQuery commands to dynamically manipulate the DOM.

回答2:

The only way to do this using foundation.css is to hide and show div-E according to the screen size

<link href="http://cdn.jsdelivr.net/foundation/5.4.3/css/foundation.css" rel="stylesheet"/>
<div class="row">
    <div class="small-12 columns">
        A
    </div>
</div>

<div class="row">
    <div class="small-12 medium-8 columns">
        <div class="row">
            <div class = "small-12 columns">
                B
            </div>
        </div>
        <div class="row">
            <div class = "small-12 columns">
                C
            </div>
        </div>
    </div>
    <div class="small-12 medium-4 hide-for-small columns">
        E
    </div>
</div>

<div class="row">
    <div class = "small-12 columns">
        D
    </div>
</div>
  <div class="row">
<div class="small-12 medium-4 show-for-small columns">
        E
</div>  
    </div>

来源：https://stackoverflow.com/questions/26723271/foundation-5-grid-push-pull