JSFiddle - React, Tailwind, and code Playground

HTML

<div class="main">
  <div class="control">control</div>
  <div class="content">content</div>
  <div class="footer">footer</div>
</div>

CSS

.main{
  display:flex;
  flex-direction:column;
}
@media screen and (max-width:500px)
{
  .content{
    order:1;
  }
  .control{
    order:2;
  }
  .footer{
    order:3;
  }
}