CSS FlexBox | Reordering Elements in Mobile - html

Question

I'm trying to learn CSS Flexbox and found an impediment.
I have content that displays right and left on desktop screen sizes and for mobile, I have flex-direction: column
See the visual bellow:
Desktop:
Mobile:
This is the code to accomplish such:
<div class="container">
<div class="box box1">
<div class="a">a</div>
<div class="b">b</div>
</div>
<div class="box box2">
<div class="c">c</div>
<div class="d">d</div>
</div>
</div>
These are the flexbox styles:
.box {
color: white;
font-size: 100px;
text-align: center;
text-shadow: 4px 4px 0 rgba(0, 0, 0, 0.1);
padding: 10px;
width: 100vw;
}
.container {
display: flex;
height: 100vh;
}
.a, .b, .c, .d {
height: 50%;
}
#media all and (max-width: 500px) {
.container {
flex-direction: column;
}
.box {
height: 50vh;
}
}
When in mobile, how can I order the following divs to be displayed in columns (as is) however on the following order:
a
c
d
b
I can't seem to find a solution for that unfortunately.
I have a CodePen here the CSS lines that matter are from line 162 onward.

Answer 1

You can consider display:contents (https://caniuse.com/#feat=css-display-contents) on the .box element then you will be able to use order on the inner elements:
.box {
color: white;
font-size: 80px;
text-align: center;
text-shadow: 4px 4px 0 rgba(0, 0, 0, 0.1);
padding: 10px;
width: 100vw;
}
body {
margin:0;
}
.container {
display: flex;
height: 100vh;
background:blue;
}
.a,.b,.c,.d {
height: 50%;
border:2px solid;
}
#media all and (max-width: 500px) {
.container {
flex-direction: column;
}
.box {
display:contents;
}
.b {
order:2;
}
}
<div class="container">
<div class="box box1">
<div class="a">a</div>
<div class="b">b</div>
</div>
<div class="box box2">
<div class="c">c</div>
<div class="d">d</div>
</div>
</div>
display: contents causes an element's children to appear as if they were direct children of the element's parent, ignoring the element itself. This can be useful when a wrapper element should be ignored when using CSS grid or similar layout techniques.
If you are open to change the html you can do it like below:
.container > * {
color: white;
font-size: 80px;
text-align: center;
text-shadow: 4px 4px 0 rgba(0, 0, 0, 0.1);
padding: 10px;
border:2px solid;
box-sizing:border-box;
}
body {
margin:0;
}
.container {
display: flex;
flex-direction:column;
flex-wrap:wrap;
height: 100vh;
background:blue;
padding:10px;
box-sizing:border-box;
}
.a,.b,.c,.d {
height: 50%;
width:50%;
}
#media all and (max-width: 500px) {
.a,.b,.c,.d {
width:100%;
height:25%;
}
.b {
order:2;
}
}
<div class="container">
<div class="a">a</div>
<div class="b">b</div>
<div class="c">c</div>
<div class="d">d</div>
</div>
And with CSS grid:
.container > * {
color: white;
font-size: 80px;
text-align: center;
text-shadow: 4px 4px 0 rgba(0, 0, 0, 0.1);
padding: 10px;
box-sizing:border-box;
border:2px solid;
}
body {
margin:0;
}
.container {
display: grid;
grid-template-areas:
'a b'
'c d';
grid-template-columns:1fr 1fr;
grid-template-rows:1fr 1fr;
grid-gap:10px;
min-height: 100vh;
background:blue;
padding:10px;
box-sizing:border-box;
}
.a {
grid-area:a;
}
.b {
grid-area:b;
}
.c {
grid-area:c;
}
.d {
grid-area:d;
}
#media all and (max-width: 500px) {
.container {
grid-template-areas:
'a'
'c'
'd'
'b';
grid-template-columns:1fr;
grid-template-rows:1fr 1fr 1fr 1fr;
}
}
<div class="container">
<div class="a">a</div>
<div class="b">b</div>
<div class="c">c</div>
<div class="d">d</div>
</div>

Answer 2

If you order your divs as .a & .c in .box1 and .c & .d in .box 2, you can use column in .container for desktop, and column in .box in mobile + order within .box2:
.box {
color: white;
font-size: 100px;
text-align: center;
text-shadow: 4px 4px 0 rgba(0, 0, 0, 0.1);
padding: 10px;
width: 100vw;
display: flex; /* <-- */
}
.container {
display: flex;
height: 100vh;
flex-direction: column; /* <-- */
}
.a, .b, .c, .d {
height: 50%;
}
#media all and (max-width: 500px) {
.box {
height: 50vh;
flex-direction: column; /* <-- */
}
.box2 .d {
order: 0; /* <-- */
}
}
<div class="container">
<div class="box box1">
<div class="a">a</div>
<div class="c">c</div>
</div>
<div class="box box2">
<div class="b">b</div>
<div class="d">d</div>
</div>
</div>

Answer 3

Nuri Katsuki's comment is right. If the "abcd" divs are on the same level, you can use CSS order property to achieve the order you want on mobile.
Also, the flex-wrap: wrap makes the children flow into columns on desktop query
I've edited your sample to illustrate it:
.container {
color: white;
font-size: 100px;
text-align: center;
text-shadow: 4px 4px 0 rgba(0, 0, 0, 0.1);
width: 100vw;
display: flex;
height: 100vh;
flex-direction: column;
flex-wrap: wrap;
}
.a { background:#e67e22;}
.b { background:#e74c3c;}
.c { background:#9b59b6;}
.d { background:#34495e;}
.a, .b, .c, .d {
height: 50%;
width: 50%;
}
#media all and (max-width: 500px) {
.container {
height: auto;
}
.a, .b, .c, .d { width: 100%; }
.b {
order: 3;
}
}
<div class="container">
<div class="a">a</div>
<div class="b">b</div>
<div class="c">c</div>
<div class="d">d</div>
</div>
/* Some default styles to make each box visible */
html,body {
padding: 0;
margin: 0;
}
.container {
color: white;
font-size: 100px;
text-align: center;
text-shadow: 4px 4px 0 rgba(0, 0, 0, 0.1);
width: 100vw;
display: flex;
height: 100vh;
align-items: stretch;
flex-direction: column;
flex-wrap: wrap;
}
.a { background:#e67e22;}
.b { background:#e74c3c;}
.c { background:#9b59b6;}
.d { background:#34495e;}
.a, .b, .c, .d {
height: 50%;
width: 50%;
}
#media all and (max-width: 500px) {
.container {
height: auto;
}
.a, .b, .c, .d { width: 100%; }
.b {
order: 3;
}
}
<div class="container">
<div class="a">a</div>
<div class="b">b</div>
<div class="c">c</div>
<div class="d">d</div>
</div>