divs neu anordnen beim skalieren

Question

Kann ich meine div-Blöcke neu anordnen, wenn ich das Fenster verkleinere? Zum Beispiel sollte das rote div vor dem blauen div erscheinen, wenn ich auf 0-770px width window verkleinere. Aber wenn das Fenster min ist. 771px sollte das blaue div vor dem roten div erscheinen.

Ich bin nicht sicher, dass es ohne Javascript möglich ist, aber eine Lösung ohne Javascript ist deffintly vorzuziehen.

Vielen Dank!

@charset "utf-8"; 
 

 
/* CSS Document */ 
 

 
#wrapper { 
 
    width: 1000px; 
 
    height: auto; 
 
    background-color: grey; 
 
} 
 

 
#boks-green { 
 
    width: 50%; 
 
    background-color: green; 
 
    height: 400px; 
 
    display: block; 
 
    float: left; 
 
} 
 

 
#boks-blue { 
 
    width: 50%; 
 
    background-color: deepskyblue; 
 
    height: 400px; 
 
    display: block; 
 
    position: relative; 
 
    float: left; 
 
} 
 

 
#boks-red { 
 
    width: 50%; 
 
    background-color: red; 
 
    height: 400px; 
 
    display: block; 
 
    position: relative; 
 
    float: left; 
 
} 
 

 
#boks-purple { 
 
    width: 50%; 
 
    background-color: purple; 
 
    height: 400px; 
 
    display: block; 
 
    position: relative; 
 
    float: left; 
 
} 
 

 
@media only screen and (max-width: 770px) { 
 
    #boks-green { 
 
    width: 100%; 
 
    background-color: green; 
 
    height: 400px; 
 
    display: block; 
 
    float: left; 
 
    } 
 
    #boks-blue { 
 
    width: 100%; 
 
    background-color: deepskyblue; 
 
    height: 400px; 
 
    display: block; 
 
    position: relative; 
 
    float: left; 
 
    } 
 
    #boks-red { 
 
    width: 100%; 
 
    background-color: red; 
 
    height: 400px; 
 
    display: block; 
 
    position: relative; 
 
    float: left; 
 
    } 
 
    #boks-purple { 
 
    width: 100%; 
 
    background-color: purple; 
 
    height: 400px; 
 
    display: block; 
 
    position: relative; 
 
    float: left; 
 
    } 
 
}

<div id="wrapper"> 
 
    <div id="boks-green"> 
 
    </div> 
 

 
    <div id="boks-blue"> 
 
    </div> 
 

 
    <div id="boks-red"> 
 
    </div> 
 

 
    <div id="boks-purple"> 
 
    </div> 
 

 
</div>

Answer 1

Wenn Sie flexbox verwenden erwägen könnte, die heute quite well supported ist, können Sie dies ganz einfach.

Zuerst benötigen Sie Medienabfragen. Wenn Ihr Container ein flex Container ist, können Sie das Attribut order für die untergeordneten Elemente verwenden, um auszuwählen, wo das Element angezeigt werden soll.

So würde ich verwenden:

#boks-blue { 
order: 1; 
} 

#wrapper { 
    display: flex; 
    flex-direction: column; 
} 

innerhalb Ihrer Medien-Abfrage.

Sie können mehr über flexboxes here erfahren oder Sie können tiefer in einer sehr interaktiven Art und Weise here digg graben.