Change Div Order On Responsive Design

May 30, 2024 Post a Comment

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

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

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

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

Solution 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: 020px;
}

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

}

Solution 3:

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

Solution 4:

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><styletype="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><divid="nav_bar">Nav</div><divid="container"><divid="left_panel"><divclass="center">
                    Left Panel content
                </div></div><divid="right_panel"><divid="inner_container"class="center"><divclass="data_container">
                        Action Item 1
                    </div><divclass="data_container">
                        Action Item 2
                    </div><divclass="data_container">
                        Action Item 3
                    </div></div></div></div><divid="footer">Footer</div></body></html>

Solution 5:

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/

Html5 School