Hinzufügen einer Zeile zu einem verschachtelten Flex-Container auf Medienabfrage

Question

Ich habe einen primären Container, der alle div s mit einer flex-direction Zeile enthält.

Ein zweiter Container, der verschachtelt ist, enthält zwei div s, die eine Spalte haben, um zwei div s in einer Reihe im äußeren Container zu stapeln.

Mit flex-box und Medienabfrage, ich habe versucht, die vorhandene zwei Zeilenspalte div 'kleineren Container' in eine drei Zeilen Spalte Div einmal die Browserbreite ist weniger als 1000px.

Ich habe versucht, dies zu tun durch eine drittes leeres div innerhalb smaller-containerErstellen und außerhalb des kleineren Behälters seinen Auftrag mit einem div tauschen, sobald der Browser-Breite kleiner als 1000px ist.

Es hat nicht funktioniert. Ich denke, das liegt daran, dass die beiden fraglichen div (das leere div und das äußere div) sich auf einer anderen Verschachtelungsebene befinden.

Es wäre großartig, wenn jemand eine Lösung finden könnte, um die zwei Zeilen in einer Spalte in drei Zeilen in einer Spalte umzuwandeln.

Noch besser, wenn diese Lösung keinen verschachtelten Container benötigt. Javascript-Lösung ist auch willkommen, wenn es kein Plugin benötigt.

Bild davon, wie es aussehen sollte:

/*Basic Reset*/ 
 

 
* { 
 
    box-sizing: border-box; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
html, 
 
body { 
 
    height: 100%; 
 
} 
 
body { 
 
    max-width: 1366px; 
 
    margin: auto; 
 
    width: 100%; 
 
} 
 
.container { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    flex-direction: row; 
 
} 
 
.box-1 { 
 
    order: 1; 
 
    background-color: red; 
 
    height: 150px; 
 
    width: 50%; 
 
} 
 
.smaller-container { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    flex-direction: column; 
 
    width: 50%; 
 
    order: 2; 
 
} 
 
.box-2 { 
 
    order: 3; 
 
    background-color: blue; 
 
    height: 75px; 
 
    width: 100%; 
 
} 
 
.box-3 { 
 
    order: 4; 
 
    background-color: green; 
 
    height: 75px; 
 
    width: 100%; 
 
} 
 
.box-4 { 
 
    order: 5; 
 
    width: 100%; 
 
} 
 
.box-5 { 
 
    order: 6; 
 
    background-color: orange; 
 
    height: 150px; 
 
    width: 100%; 
 
} 
 
@media screen and (max-width: 1000px) { 
 
    .box-2 { 
 
    height: 50px; 
 
    } 
 
    .box-3 { 
 
    height: 50px; 
 
    } 
 
    /******* Here we swap the empty div that hasbeen existing in the smaller container 
 
     with an outer div ********/ 
 
    .box-5 { 
 
    order: 5; 
 
    height: 50px; 
 
    } 
 
    .box-4 { 
 
    order: 6; 
 
    background-color: purple; 
 
    height: 150px; 
 
    } 
 
} 
 
[image of desired solution][1] [1]:http://i.stack.imgur.com/vlvlx.png

<div class="container"> 
 
    <div class="box-1"></div> 
 
    <div class="smaller-container"> 
 
    <div class="box-2"></div> 
 
    <div class="box-3"></div> 
 
    <div class="box-4"></div> 
 
    </div> 
 
    <div class="box-5"></div> 
 
</div>

https://jsfiddle.net/lukindo/nuv603h9/1/

Answer 1

Nun, du hast Recht, dass die order Eigenschaft nicht anders funktioniert Verschachtelungsebenen. It only works among siblings.

Scripting ist eine Option, die Sie verfolgen können. Ein anderer, etwas hackischer, besteht darin, ein HTML-Element zu duplizieren. Platzieren Sie das orangefarbene Box-Element (.box-5) insbesondere in dem primären und dem verschachtelten Container.

Dann verwenden Sie display: none auf orange und lila Boxen pro Ihre Medienabfrage.

Hier ist ein Beispiel:

* { 
 
    box-sizing: border-box; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
html, 
 
body { 
 
    height: 100%; 
 
} 
 
body { 
 
    max-width: 1366px; 
 
    margin: auto; 
 
    width: 100%; 
 
} 
 
.container { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    flex-direction: row; 
 
} 
 
.box-1 { 
 
    order: 1; 
 
    background-color: red; 
 
    height: 150px; 
 
    width: 50%; 
 
} 
 
.smaller-container { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    flex-direction: row; 
 
    width: 50%; 
 
    order: 2; 
 
} 
 
.box-2 { 
 
    order: 3; 
 
    background-color: blue; 
 
    height: 75px; 
 
    width: 100%; 
 
} 
 
.box-3 { 
 
    order: 4; 
 
    background-color: green; 
 
    height: 75px; 
 
    width: 100%; 
 
} 
 
.smaller-container > .box5 { 
 
    display: none; 
 
} 
 
.container > .box-5 { 
 
    order: 6; 
 
    background-color: orange; 
 
    height: 150px; 
 
    width: 100%; 
 
} 
 
@media screen and (max-width: 1000px) { 
 
    .box-2 { 
 
    height: 50px; 
 
    } 
 
    .box-3 { 
 
    height: 50px; 
 
    } 
 
    .container > .box-4 { 
 
    order: 6; 
 
    background-color: purple; 
 
    height: 150px; 
 
    width: 100%; 
 
    } 
 
    .smaller-container > .box-5 { 
 
    display: block; 
 
    height: 50px; 
 
    background-color: orange; 
 
    width: 100%; 
 
    order: 6; 
 
    } 
 
    .container > .box-5 { 
 
    display: none; 
 
    } 
 
}

<div class="container"> 
 
    <div class="box-1"></div> 
 
    <div class="smaller-container"> 
 
    <div class="box-2"></div> 
 
    <div class="box-3"></div> 
 
    <div class="box-5"></div> 
 
    </div> 
 
    <div class="box-4"></div> 
 
    <div class="box-5"></div> 
 
</div>

Revised Fiddle