Change Div order on Responsive Design

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

This is a common problem, flex-box is in the works though and will solve this. — Matt Kieran, Oct 17 '12 at 11:51
The URL given redirects to MALWARE http://i.imgur.com/39Fo2gN.png — relipse, Jan 29 '16 at 17:17
The answer contain here: http://stackoverflow.com/questions/32829567/change-div-order-with-css-depending-on-device-width — ashanrupasinghe, Feb 13 '17 at 10:04

score 12 · Answer 1 · answered Oct 17 '12 at 12:00

12

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>

answered Oct 17 '12 at 12:00

Rick Calder

18,310
3
24
41

6

Though the technique for reordering elements is fine, your implementation here is terrible. The most egregious issue is that you're performing the reordering operation every time `resize` is triggered, which can be dozens of times per second in IE, Safari, and Chrome. – coreyward Mar 21 '14 at 20:53
I solved mine without using remove. `$("#mydiv").insertBefore($("#myotherdiv"))` – prieston Nov 28 '15 at 16:54

score 5 · Answer 2 · answered Jan 09 '15 at 13:03

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

}

score 2 · Answer 3 · answered Oct 17 '12 at 12:12

Try this Maybe Helpful

    @media (min-width:1px) and (max-width:599px) {
        #pageFrame {
            width:100%;

        }
        #logo {
            margin:0 auto;
            width:50px;
            height:50px;
        }
        #topLinks {
            position:absolute;
             top:250px;
            float:right;
            width:100%;
            background-color:yellow;

        }
        #content {
            position:absolute;
            top:100px;
            clear:none;
            float:left;
            width:100%;
        }
        #footer {
            position:absolute;
            top:350px;        
            clear:both;
            width:100%;
        }

DEMO

justinavery · Answer 4 · 2015-04-23T21:19:21.373

2

Flex-Box is the answer you are looking for. Check out ( this link is now broken - http://www.jordanm.co.uk/lab/contentchoreography) for a full explanation for all of Flexbox features https://css-tricks.com/snippets/css/a-guide-to-flexbox/

edited Apr 23 '15 at 21:19

answered Aug 28 '13 at 08:28

justinavery

2,596
2
19
21

Does flex-box work for all browsers? (i.e. old Android native browser etc.) ? – jeff Jan 01 '14 at 18:28
1

Flexbox is only supported in IE10 and up, and not at all on opera mini. It is supported on android 2.1 and up (see details here http://caniuse.com/#feat=flexbox) – justinavery Jan 03 '14 at 12:09
1

the link is dead and an answer should be able to stand on its own without an external link. – Brad Allred Mar 31 '15 at 16:13

score 2 · Answer 5 · answered Nov 22 '14 at 09:59

Yes it is very simple to change the order of divs in a container. Please have a look into my working HTML css code.

<html>
    <head>
        <style type="text/css">
            #nav_bar{
                width:100%;
                height:50px;
                background:red;
            }
            #container{
                width:100%;
                height:500px;
            }

            #left_panel {
                position:relative;
                float:left;
                width:250px;
                border:0px solid black;
                background:#ccc;
                height:100%;
            }
            #right_panel{
                width:100%;
                background:#666;
                height:100%;
            }
            #inner_container{
                height:100%;    
            }
            .center {
                margin-left: auto;
                margin-right: auto;
                width: 40%;
                padding-top:50px;
            }
            .data_container{
                border:1px solid black;
                float:left;
                position:relative;
                padding:10px;
            }
            #footer{
                width:100%;
                height:50px;
                background:blue;
            }
            @media all and (max-width: 700px) {
                #container {
                    width: 100%; 
                    height: 500px;
                    display: flex;
                    flex-flow: column-reverse ;
                }
                #left_panel {
                    width:100%;
                    height:200px;
                }
                #right_panel{
                    width:100%;
                    height:300px;
                }
            }
        </style>
    </head>
    <body>
        <div id="nav_bar">Nav</div>
        <div id="container">
            <div id="left_panel">
                <div class="center">
                    Left Panel content
                </div>
            </div>
            <div id="right_panel">
                <div id="inner_container" class="center">
                    <div class="data_container">
                        Action Item 1
                    </div>
                    <div class="data_container">
                        Action Item 2
                    </div>
                    <div class="data_container">
                        Action Item 3
                    </div>
                </div>
            </div>  
        </div>
        <div id="footer">Footer</div>
    </body>
</html>

score 1 · Answer 6 · answered Aug 20 '14 at 08:31

1

Try to create two divs one in the footer and one in header, "display:none" the bottom one when the screen is less then X show it.

answered Aug 20 '14 at 08:31

AHMED.D

165
2
13

score 0 · Answer 7 · answered Jun 24 '15 at 12:51

You should have a look at the direction css property. https://developer.mozilla.org/en-US/docs/Web/CSS/direction

What you can do is:

direction: rtl; on your parent container : .container { direction: rtl; }
reset it to normal on the direct children : .container > * { direction: ltr; }
Change the order of your divs in your HTML to display things in the right order on desktop version

And this is working on every browsers cause this property is supported everywhere (from IE 5.5...).

score 0 · Answer 8 · answered Jul 24 '15 at 10:49

using EventListener and matchMedia:

 //on load
 responsive_change_box_order();
 //on resize
 window.addEventListener('resize', responsive_change_box_order );

 function responsive_change_box_order() {
       if (window.matchMedia("(max-width: 1118px)").matches) {
           jQuery("#block-menu-block-1").remove().insertBefore(jQuery("#content"));
       }
       else{
           jQuery("#block-menu-block-1").remove().prependTo(jQuery(".region-sidebar-second .region-inner"));
       }
   }

score 0 · Answer 9 · answered Sep 22 '17 at 20:02

If you are using Bootstrap 4, I created a simple plugin to check for the current media query breakpoint and then set it as a variable.

You can then do something like

  if ( xs == true ) { 
    $("#topLinks").remove().insertAfter($("#content"));
  }

You can get it here: https://jacoblett.github.io/IfBreakpoint/

Change Div order on Responsive Design

9 Answers9

Linked