JSFiddle - React, Tailwind, and code Playground

HTML

<article>
    <div id='a1'>a1</div>
    <div id='b1'>b1</div>
    <div id='a2'>a2</div>
    <div id='b2'>b2</div>
 </article>

CSS

article {
  display: flex;
  flex-wrap: wrap;
}

#a1 { order: 1; }
#a2 { order: 2; }
#b1 { order: 3; }
#b2 { order: 4; }

div {
  flex: 0 0 100%;
  background-color: lightgreen;
  margin-bottom: 5px;
}

#b1, #b2 {
  flex: 1 0 34%; /* allows max 2 items per row, with ample space for margins */
}

#b2 {
  margin-left: 5px;
}

@media ( max-width: 500px) {
  article {
    display: block;
  }
  #b2 {
    margin: 0;
  }
}