JSFiddle - React, Tailwind, and code Playground

HTML

<div class="main">
  <div class="col">1</div>
  <div class="col">2</div>
  <div class="col">3</div>
</div>

CSS

.main{
  width:100%;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
}
.col{
  width:30%;
  text-align:center;
  border:1px solid #bbb;
  box-sizing:border-box;
}


@media (max-width : 400px)
{
  .col{
    width:50%;
  }
  .col:first-child{
    width:100%;
  }
  
}

@media (max-width : 200px)
{
  .col{
    width:90%;
  }
  .col:first-child{
    width:90%;
  }
}