Flexbox kids, row and column combination

Question

I use flexbox to align my 4 elements per line.

Then I want to break it down for mobile as follows:

I have successfully reordered the elements here:

.flexcontainer { display: -webkit-flex; display: flex; -webkit-flex-direction: row; flex-direction: row; -webkit-align-items: flex-start; align-items: flex-start; width: 90%; margin: 0 auto; background: red; } .flexcontainer>div { height: 100px; width: 25%; background-color: #E46119; border: 1px solid #626262; margin: 3px; } .flexcontainer>div:nth-of-type(1) { -webkit-flex: 1 0 0; flex: 1 0 0; order: 3; } .flexcontainer>div:nth-of-type(2) { -webkit-flex: 2 0 0; flex: 2 0 0; order: 2; } .flexcontainer>div:nth-of-type(3) { -webkit-flex: 2 0 0; flex: 2 0 0; order: 1; } .flexcontainer>div:nth-of-type(4) { -webkit-flex: 1 0 0; flex: 1 0 0; order: 4; } 

 <div class="flexcontainer"> <div>one</div> <div>two</div> <div>three</div> <div>four</div> </div> 

But I was fixated on how to split child elements "two" and "three" into their own lines. And then, how to make the element "one" and "four" each 50% in its own line.

Am I trying to do this without additional HTML markup? Thank you for your advice.

 .flexcontainer { display: -webkit-flex; display: flex; -webkit-flex-direction: row; flex-direction: row; -webkit-align-items: flex-start; align-items: flex-start; width: 90%; margin: 0 auto; background: red; } .flexcontainer>div { height: 100px; width: 25%; background-color: #E46119; border: 1px solid #626262; margin: 3px; } .flexcontainer>div:nth-of-type(1) { -webkit-flex: 1 0 0; flex: 1 0 0; } .flexcontainer>div:nth-of-type(2) { -webkit-flex: 2 0 0; flex: 2 0 0; } .flexcontainer>div:nth-of-type(3) { -webkit-flex: 2 0 0; flex: 2 0 0; } .flexcontainer>div:nth-of-type(4) { -webkit-flex: 1 0 0; flex: 1 0 0; } 

 <div class="flexcontainer"> <div>one</div> <div>two</div> <div>three</div> <div>four</div> </div> 

Answer 1

The transition to the desktop-mobile can only be achieved with CSS using flexbox.

HTML does not require any changes.

 .flexcontainer { display: flex; width: 90%; margin: 0 auto; background: red; } .flexcontainer > div { flex: 0 0 25%; height: 100px; background-color: #E46119; border: 1px solid #626262; margin: 3px; } .flexcontainer > div:nth-of-type(1) { flex: 1 0 0; } .flexcontainer > div:nth-of-type(2) { flex: 2 0 0; } .flexcontainer > div:nth-of-type(3) { flex: 2 0 0; } .flexcontainer > div:nth-of-type(4) { flex: 1 0 0; } @media screen and ( max-width: 500px) { .flexcontainer { flex-wrap: wrap; } .flexcontainer > div:nth-of-type(1) { order: 3; flex-basis: 34%; } .flexcontainer > div:nth-of-type(2) { order: 2; flex-basis: 70%; } .flexcontainer > div:nth-of-type(3) { order: 1; flex-basis: 70%; } .flexcontainer > div:nth-of-type(4) { order: 4; flex-basis: 34%; } } 

 <div class="flexcontainer"> <div>one</div> <div>two</div> <div>three</div> <div>four</div> </div> 

jsFiddle demo

How it works

• A media request is triggered when the screen is 500 pixels or less.
• The order property sets the order of elements on the screen. The default value is 0 for all elements.
• With flex-wrap: wrap in a container, you can now wrap flexible elements.
• With flex-grow a positive integer is set, no flex-basis is needed. Since flex-grow will consume free space in the string, flex-basis must be large enough to force a wrapper.
• If the exact flex-basis value is preferred, any borders, indents, and margins should be considered, possibly using box-sizing: border-box and / or calc ().

Answer 2

You can group “three” and “two” into your own flash drive and use flex-wrap to achieve this.

Here is the JSFiddle: https://jsfiddle.net/zw10dzzn/3/

You may need to play around with the fields and order to get exactly the layout you want.

 .flex-container { display: flex; align-items: flex-start; width: 90%; margin: 0 auto; background: red; flex-wrap: wrap; /* allow elements to wrap in mobile view */ } .flex-container .one, .flex-container .two-and-three, .flex-container .four { background-color: magenta; } .flex-container .one, .flex-container .four { height: 100px; margin: 3px; flex-grow: 1; flex-shrink: 0; flex-basis: auto; } .flex-container .two-and-three { order: 1; display: flex; flex: 0 1 100%; flex-wrap: wrap; } .flex-container .two-and-three .two, .flex-container .two-and-three .three { background-color: #FC0; flex: 1 0 100%; margin: 3px; height: 100px; } .flex-container .two-and-three .two { order: 2; } .flex-container .two-and-three .three { order: 1; } .flex-container .one { order: 3; } .flex-container .four { order: 4; } @media (min-width: 768px) { .flex-container { flex-wrap: nowrap; /* back to single row */ } .flex-container .two-and-three { flex-grow: 4; flex-basis: auto; /* stop spanning the whole row */ flex-wrap: nowrap; /* back to single row */ } .flex-container .two-and-three .two, .flex-container .two-and-three .three { flex-basis: 50%; } .flex-container .two-and-three .two { order: 1; } .flex-container .two-and-three .three { order: 2; } .flex-container .one { order: 1; } .flex-container .four { order: 4; } } 

 <div class="flex-container"> <div class="one">one</div> <div class="two-and-three"> <div class="two">two</div> <div class="three">three</div> </div> <div class="four">four</div> </div>