JSFiddle - React, Tailwind, and code Playground

by zinyosrim

HTML

<div class="desktop">
  <div yellow>lorem</div>
  <div orange>lorem</div>
  <div purple>lorem</div>
</div>

CSS

* {
  box-sizing: border-box;
}
main,
div {
  display: flex;
  padding: 2rem;
}

.desktop {
  flex-direction: column;
  flex-wrap: wrap;
  height: 400px;
  width: 100%;
}

div {
  flex: 1;
  width: 30%;
}

[orange] {
  background-color: #FFAD77;
  flex: 0 0 70%;
}

[yellow] {
  background-color: #FFE377;
  flex: 0 0 100%;
  width: 70%;
}

[purple] {
  background-color: #FF77C8;
}

@media(max-width: 480px) {
  .desktop div {
    flex: 1;
    width: 100%;
  }
  div[orange] {
    order: -1;
    flex: 2;
  }
  div[yellow] {
    flex: 5;
  }
  div[purple] {
    flex: 1;
  }
}