JSFiddle - React, Tailwind, and code Playground

HTML

<div class="main">
        <div class="a">1</div>
        <div class="b">2</div>
        <div class="c">
            <div class="ca">3</div>
        </div>
        <div class="d">4</div>
    </div>

CSS

* {
  margin: 0;
  padding: 0;
  position: relative;
}
body {
    font-size: 6em;
}
.main {
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

@media only screen and (max-width: 480px) {
  .main {
    display: box;
    display: -moz-box;
    display: -webkit-box;
    box-orient: vertical;
    -moz-box-orient: vertical;
    -webkit-box-orient: vertical;
    width: 480px;
  }
}
.main div {
  margin: 5px;
  background: #000;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  height: 100px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  float: left;
  color: #FFF;
  text-align: center;
}
.main .a {
  width: 100%;
  margin: 5px 0;
}
@media only screen and (max-width: 480px) {
  .main .a {
    box-ordinal-group: 4;
    -moz-box-ordinal-group: 4;
    -webkit-box-ordinal-group: 4;
  }
}
.main .b {
  width: 47%;
}
@media only screen and (max-width: 480px) {
  .main .b {
    box-ordinal-group: 3;
    -moz-box-ordinal-group: 3;
    -webkit-box-ordinal-group: 3;
    width: 100%;
    margin: 5px 0;
  }
}
.main .c {
width: 47%;
}
@media only screen and (max-width: 480px) {
  .main .c {
    box-ordinal-group: 1;
    -moz-box-ordinal-group: 1;
    -webkit-box-ordinal-group: 1;
    width: 100%;
    margin: 5px 0;
  }
}
.main .c .ca {
  background: red;
  width: 47%;
  margin: 0;
}
.main .d {
width: 47%;
}
@media only screen and (max-width: 480px) {
  .main .d {
    box-ordinal-group: 2;
    -moz-box-ordinal-group: 2;
    -webkit-box-ordinal-group: 2;
    width: 100%;
    margin: 5px 0;
  }
}