html - CSS FlexBox | Reordering Elements in Mobile

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;
  }
}

Question: 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 onwards.

Thank you in advance.

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>