JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
  <div class="child-1-1">child-1-1</div>
  <div class="child-1-2">child-1-2</div>
  <div class="child-2-1">child-2-1</div>
  <div class="child-2-2">child-2-2</div>
</div>

CSS

.wrapper {
  display: flex;
  flex-wrap: wrap;
}

.child-1-1 {
  order: 1;
}

.child-1-2 {
  order: 3;
}

.child-2-1 {
  order: 2;
}

.child-2-2 {
  order: 4;
}

.wrapper>div {
  flex: 1 0 40%;
  height: 50px;
  margin: 5px;
  border: 1px solid #ccc;
  background-color: lightgreen;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media ( max-width: 600px) {
  .wrapper {
    flex-direction: column;
  }
  div.child-2-1 {
    order: -1;
    background-color: orange;
  }
}