JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
  <div class="div1"></div>
  <div class="div2"></div>
  <div class="div3"></div>
</div>

CSS

.container {
    display: flex;
  flex-direction: column;
  padding: 0 10vw; 
}
div:not(last-child) {
  margin-bottom: 20px;
}
.div1 {
  height: 120px;
  background-color: yellow;
}
.div2 {
  height: 150px;
  background-color: orange;
}
.div3 {
  height: 350px;
  background-color: red;
}

@media (min-width: 700px) {
  .container {
    flex-direction: row;
    flex-wrap: wrap;
  }
    .container > div {
        width: 30vw;
    }
  .div2 {
    order: 3;
  }
  .div3 {
    order: 2;
    margin-left: 20px;
  }
}