Change Div order on Responsive Design [duplicate]

Question

I am creating a responsive design website.

Basically when the view port is lower than X I want to show the menu at the foot of the page.

EXAMPLE LINK DEAD - SITE NO LONGER OWNED BY ME

IF you resize your browser window, you will notice 3 different designs (Based on end goal design rather than device types)

V1: greater than 999px, You will see Red box top left, blue box next to red box.

V2: between 600px and 999px, You will notice red box gets smaller, blue box now sits under red box

v3: Less than 600px, You will notice again red box gets smaller, blue box now yellow.

Basically, in V3, I want to make the now yellow box, sit under the green box, above the grey box

so the order goes Red Box Green Box Yellow box Grey Box

Other than the nasty hide old div, show new div hack (technique) or JS version (goes away from CSS Responsive) Is there a way to move this.

CSS is within the file, so view source shows everything.

Cheers

Answer 1

I honestly can't think of a way to do this in CSS alone, but it is easily doable in jQuery without breaking your responsive design. Your CSS doesn't need to change except to remove the margin-top from the #top-links div.

    <script type="text/javascript">
$(document).load($(window).bind("resize", listenWidth));

    function listenWidth( e ) {
        if($(window).width()<600)
        {
            $("#topLinks").remove().insertAfter($("#content"));
        } else {
            $("#topLinks").remove().insertBefore($("#content"));
        }
    }
</script>

Answer 2

I have just implemented a solution from

http://www.jtudsbury.com/thoughts/rearrange-div-order.php

that uses display: table-header-group; and display: table-footer-group;

Here is my example for two horizontal 50% width boxes that switch to right above left box on shrinking window width:

.box-container {
    display: table;
}

.box-50 {
    width: 50%;
    display: table-cell;
    padding: 0 20px;
}

@media only screen and (max-width : 700px) {

    .box-container {
        display: block;
    }
    .box-50 {
        display: block;
        width: 100%;
    }


    /* http://www.jtudsbury.com/thoughts/rearrange-div-order.php */
    .box-50.left {
        display: table-footer-group;
    }

    .box-50.right {
        display: table-header-group;
    }

}