JSFiddle - React, Tailwind, and code Playground

by Aziz Natour

HTML

<div class="flex">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
  <div class="child">4</div>
</div>

CSS

body {
  background: lightblue;
}

.flex {
  display: flex;
  flex-direction: column;
  padding: 1em;
  border:1px solid #000;
}

.flex .child {
  font-size: 3em;
  padding: 0.1em;
  border: 1px solid #000;
  margin-bottom: .5em;
  box-sizing: border-box;
}

@media (min-width: 600px) {
  .flex {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .flex .child {
    order: 3;
    width: 33.33%;
  }
  .flex .child:nth-of-type(1) {
    order: 1;
    width: 33.33%;
  }
  .flex .child:nth-of-type(3) {
    order: 2;
    width: 66.66%;
  }
  .flex .child:nth-of-type(2), .flex .child:nth-of-type(4) {
    margin-right: 66.66%;
  } 
}