html - Add a row to a nested flex container on media query -
i have 1 primary container holds divs using flex-direction of row.
a second container nested holds 2 divs have flex-direction of column, stack 2 divs in 1 row in outer container.
using flex-box , media query, attempting change existing 2 row column div 'smaller-container' 3 row column div once browser width less 1000px.
i tried doing creating third empty div within smaller-container and swapping order div outside smaller-container once browser width less 1000px.
it didn't work. think because 2 divs in question (the empty div , outer div) @ different nesting level.
it great if can find solution turn 2 row in 1 column 3 row in 1 column.
even better if solution has no need of nested container. javascript solution welcome if doesn't require plugin.
image of how should look:
/*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 , (max-width: 1000px) { .box-2 { height: 50px; } .box-3 { height: 50px; } /******* here swap empty div hasbeen existing in smaller container 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>
well, you're right order property doesn't work @ different nesting levels. it works among siblings.
scripting 1 option can pursue. another, bit hackish, duplicate html element. specifically, place orange box element (.box-5) in both primary , nested container.
then use display: none on both orange , purple boxes per media query.
here's example:
* { 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 , (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>
Comments
Post a Comment