css - ordre - order element flex




Changer l'ordre Div sur le design réactif (6)

Essayez ceci Peut-être utile

    @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

Je crée un site internet responsive design.

Fondamentalement, lorsque le port d'affichage est inférieur à XI, vous souhaitez afficher le menu au bas de la page.

EXEMPLE LINK MORTS - LE SITE N'EST PLUS PROPRIÉTÉ PAR MOI

SI vous redimensionnez la fenêtre de votre navigateur, vous remarquerez 3 designs différents (basés sur la conception de l'objectif final plutôt que sur les types d'appareils)

V1: supérieur à 999px, vous verrez la boîte rouge en haut à gauche, la boîte bleue à côté de la boîte rouge.

V2: entre 600px et 999px, vous remarquerez que la boîte rouge devient plus petite, la boîte bleue se trouve maintenant sous la boîte rouge

v3: Moins de 600px, Vous remarquerez que la boîte rouge devient plus petite, la boîte bleue maintenant jaune.

Fondamentalement, en V3, je veux faire la boîte maintenant jaune, assis sous la boîte verte, au-dessus de la boîte grise

donc la commande va Red Box Green Box Boîte jaune Boîte grise

Autre que le vieux div divaguer méchant, montrer la nouvelle div div (technique) ou la version JS (va loin de CSS Responsive) Y at-il un moyen de déplacer cela.

CSS est dans le fichier, donc la source de vue montre tout.

À votre santé


Honnêtement, je ne peux pas penser à un moyen de le faire en CSS seul, mais il est facilement réalisable dans jQuery sans casser votre conception sensible. Votre CSS n'a pas besoin de changer sauf pour enlever le margin-top de la div # top-links.

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

Oui, il est très simple de changer l'ordre des divs dans un conteneur. S'il vous plaît jeter un oeil dans mon code HTML CSS de travail.

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

Je viens de mettre en œuvre une solution de

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

qui utilise display: table-header-group; et display: table-footer-group;

Voici mon exemple pour deux boîtes horizontales à 50% de largeur qui passent à droite au-dessus de la boîte de gauche sur la largeur de la fenêtre de rétrécissement:

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

}

Vous devriez jeter un oeil à la propriété css de direction . https://developer.mozilla.org/en-US/docs/Web/CSS/direction

Ce que vous pouvez faire est:

  1. direction: rtl; sur votre conteneur parent: .container { direction: rtl; } .container { direction: rtl; }
  2. réinitialiser à la normale sur les enfants directs: .container > * { direction: ltr; } .container > * { direction: ltr; }
  3. Changez l'ordre de vos divs dans votre HTML pour afficher les choses dans le bon ordre sur la version de bureau

Et cela fonctionne sur tous les navigateurs car cette propriété est prise en charge partout (à partir de IE 5.5 ...).


en utilisant EventListener et 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"));
       }
   }




responsive-design