rearrange order of div columns according to device tablet or phone. zurb foundation 4

问题

I am using zurb foundation 4 framework. The following test site looks fine on desktop view for me. On desktop view, I have on the left side: large-7 columns (gray content text box); on the right side: i have: large-5 columns (image 1 green and image 2 blue). Please help me with exact code example. On tablet and phone view, I would like to rearrange the order of the div columns to: image 1 green box first, and then below that is gray content text box, and then below that is image 2 blue box. Please help me with exact code example. Thank you so much in advance!

Here is the preview of what I have so far: http://www.endsnore.com/_test1/marketing5.html

Here is an example of what I want to happen on tablet and phone view: http://www.endsnore.com/_test1/images/_delete14.jpg

回答1:

You can't have that layout without doing some jquery or javascript. There is no built-in css solution or even javascript from Foundation that will do the trick for you.

You can try this solution. First you need to have a layout something like this:

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

And then have this script to move the first image on top:

$(document).foundation();
$(function () {         
        var wd = $(window).width();
        if (wd < 768) {
            $("#topContent").append($("#img1").detach());
        }        
});

Take note that the script only works on load of the page and not when resizing the browser - I don't think you will need it that way anyway. But for whatever reason you do, then just enclose the "width" logic in a resize function, something like:

$(window).resize(function () {
            var wd = $(window).width();
            if (wd < 768) {
                $("#topContent").append($("#img1").detach());
            } 
});

来源：https://stackoverflow.com/questions/17027810/rearrange-order-of-div-columns-according-to-device-tablet-or-phone-zurb-foundat