Divs Stack übereinander, nur nicht in der richtigen Reihenfolge

Ich habe ein paar divs, nebeneinander platziert und mit einer Medienabfrage, um sie zu stapeln, die sie stapeln, aber ich brauche die gelbe oben zu sein und das Blau darunter. Das Gegenteil von dem, was Sie sehen, wenn das Skript ausgeführt wird und nicht sicher ist, wie es gemacht wird.Divs Stack übereinander, nur nicht in der richtigen Reihenfolge

#wrapper { 
 
    width:1000px; 
 
} 
 
#mydivLeft { 
 
    background:blue; 
 
    height:250px; 
 
    width:50%; 
 
    float:left; 
 
} 
 

 
#mydivRight { 
 
    background:yellow; 
 
    height:250px; 
 
    width:50%; 
 
    float:right; 
 
} 
 

 
@media only screen and (max-width:768px){ 
 
    #wrapper { 
 
     width:100%; 
 
    } 
 

 
    #mydivRight, #mydivLeft { 
 
     display:block; 
 
     float:none; 
 
     width:100%; 
 
    } 
 

 
}

<body> 
 
    <div id="wrapper"> 
 
     <div id="mydivLeft"> 
 
     </div> 
 
     <div id="mydivRight"> 
 
     </div> 
 
    </div> 
 
</body>

Quelle

2017-01-22 Chris

Sie können nur die Reihenfolge der divs in der HTML umkehren, was um Sie sie haben wollen.

#wrapper { 
 
    width:1000px; 
 
} 
 
#mydivLeft { 
 
    background:blue; 
 
    height:250px; 
 
    width:50%; 
 
    float:left; 
 
} 
 

 
#mydivRight { 
 
    background:yellow; 
 
    height:250px; 
 
    width:50%; 
 
    float:right; 
 
} 
 

 
@media only screen and (max-width:768px){ 
 
    #wrapper { 
 
     width:100%; 
 
    } 
 

 
    #mydivRight, #mydivLeft { 
 
     display:block; 
 
     float:none; 
 
     width:100%; 
 
    } 
 

 
}

<div id="wrapper"> 
 
    <div id="mydivRight"> 
 
    </div> 
 
    <div id="mydivLeft"> 
 
    </div> 
 
</div>

Alternativ kann eine kompliziertere Lösung ist Flexbox zu verwenden, und verwenden Sie die order Eigenschaft oder flex-direction: column-reverse;, um die Flex-Kinder neu zu ordnen.

#wrapper { 
 
    width: 1000px; 
 
    display: flex; 
 
} 
 

 
#wrapper > div { 
 
    width: 50%; 
 
    height: 250px; 
 
} 
 

 
#mydivLeft { 
 
    background: blue; 
 
} 
 

 
#mydivRight { 
 
    background: yellow; 
 
} 
 

 
@media only screen and (max-width:768px) { 
 
    #wrapper { 
 
    width: auto; 
 
    flex-direction: column-reverse; 
 
    } 
 
    #wrapper > div { 
 
    width: auto; 
 
    } 
 
}

<div id="wrapper"> 
 
    <div id="mydivLeft"> 
 
    </div> 
 
    <div id="mydivRight"> 
 
    </div> 
 
</div>

Quelle

2017-01-22 02:19:47

Dies funktioniert gut, aber in der Produktion tut es zu wollen, scheint richtig zu arbeiten, weil ich immer noch die linke Seite nach oben gehen müssen und links nach unten – Chris

@ Chris seltsam, nicht sicher, warum ... das ist wahnsinnig einfach. Für was es wert ist, habe ich meine Antwort aktualisiert und eine Flexbox-Lösung hinzugefügt. Mit Flexbox können Sie die Reihenfolge der Elemente über CSS neu ordnen, was ziemlich cool ist. Vielleicht hilft das? –

Ich fand etwas css in einer anderen Datei und es sieht so aus (ich habe die div Namen so geändert, dass sie mit denen übereinstimmen) #mydivLeft, #mydivRight { float: left; Breite: 50%; Auffüllen: 0 0 80px; } und das heißt zuerst und nicht sicher ist würde es blockieren oder nicht? – Chris

können Sie flexboxorder verwenden verwenden, um die Reihenfolge, in der die Elemente umgekehrt werden

gestapelt

#wrapper { 
 
    width: 1000px; 
 
    max-width: 100%; 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    height: 250px; 
 
} 
 
#wrapper div { 
 
    flex: 1; 
 
} 
 
#mydivLeft { 
 
    background: blue; 
 
} 
 
#mydivRight { 
 
    background: yellow; 
 
} 
 
@media only screen and (max-width: 768px) { 
 
    #wrapper div { 
 
    flex: 0 100% 
 
    } 
 
    #mydivRight { 
 
    order: -1 
 
    } 
 
}

<body> 
 
    <div id="wrapper"> 
 
    <div id="mydivLeft"> 
 
    </div> 
 
    <div id="mydivRight"> 
 
    </div> 
 
    </div> 
 
</body>

Quelle

2017-01-22 02:21:12 dippas

Kann nicht nur die Farbe ändern, weil jedes div Elemente enthält. Dies ist ein Testlauf, bevor ich ihn live starte – Chris

Sie Flexbox Layout verwenden können. Standardmäßig lautet die flex-directionrow, in den Medienabfragen ändern Sie sie in column-reverse.

#wrapper { 
 
    max-width: 1000px; 
 
    display: flex; 
 
} 
 
#mydivLeft, #mydivRight { 
 
    flex: 1; 
 
    height: 250px; 
 
} 
 
#mydivLeft { 
 
    background: blue; 
 
} 
 
#mydivRight { 
 
    background: yellow; 
 
} 
 
@media only screen and (max-width: 768px) { 
 
    #wrapper { 
 
    flex-direction: column-reverse; 
 
    } 
 
}

<div id="wrapper"> 
 
    <div id="mydivLeft"></div> 
 
    <div id="mydivRight"></div> 
 
</div>

Quelle

2017-01-22 02:28:46 Stickers

Divs Stack übereinander, nur nicht in der richtigen Reihenfolge

Antwort

Verwandte Themen