2

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.

Gary
  • 45
  • 5

2 Answers2

0

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.

Community
  • 1
  • 1
Funkyguy
  • 556
  • 2
  • 8
  • 31
  • Thanks for the quick response. Unfortunately whilst this would work for the desktop view, on mobile this results in D and E being the wrong way around. I'm trying to get E below D. – Gary Nov 03 '14 at 21:29
  • I see, I've edited my answer to reflect options available to you. – Funkyguy Nov 03 '14 at 22:20
  • Ok, thanks. So I take it there is no way to achieve this with Foundation 5 directly (e.g Push/Pull)? – Gary Nov 03 '14 at 23:32
  • I'm not sure, I'm not a god with CSS, which is why I know Foundation, haha. I don't think there is, although I wouldn't be surprised if I'm wrong. – Funkyguy Nov 04 '14 at 00:15
  • OK so based on what Sudheer posted, it doesn't look like I can achieve this with the Framework. I haven't done anything with jQuery before but looks like this is what I need to use. Are you able to provide an example of how I would swap D and E on a mobile using jQuery? – Gary Nov 06 '14 at 09:28
0

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>
Sudheer
  • 2,905
  • 2
  • 20
  • 33
  • Thanks Sudheer. However, I'm trying to avoid using show/hide as I need to avoid duplicate content within my code. Ideally I would keep the exact same DIVs on the page and just re-position them within the framework. From my research, it seems as if you cannot get DIVs outside of their current row into other rows. My only hope was when I read this article which states "Creative designers may find an occasion to push/pull columns outside of their row". http://zurb.com/university/lessons/12. I appreciate that they are not saying it's recommended, but it does sound like it's possible. – Gary Nov 04 '14 at 09:13
  • @Gary No you cannot pull or push the columns out of row. Becaouse the pull and push are based on margin-right and margin-left(given % values based on the pull and push size.) The link you posted is about push-12 columns `Try to not push or pull columns out of their row. For example,
    …
    could push an entire block outside of a browser’s viewing area`.It is for pushing page horizontally with a scroll-bar for specific requirements     – Sudheer Nov 04 '14 at 09:30