JSFiddle - React, Tailwind, and code Playground

by Kawaljit Singh

HTML

<div class="box">
   <div class="wrapper">
     <div class="divla">
        <h2>one</h2> 
     </div>
   </div>
   <div class="wrapper">
     <div class="divla">
        <h2>two</h2> 
     </div>
   </div>
   <div class="wrapper">
     <div class="divla">
        <h2>three</h2> 
    </div>
   </div>
</div>

CSS

.box {
  display: flex;
  background: yellow;
  flex-direction: row;
  flex-wrap: wrap;
}

.wrapper {
  flex: 1 0 auto;
  background: pink;
  margin: 10px;
}

@media(max-width:500px) { 
  .wrapper:nth-child(3) {
    flex: 1;
    flex-basis: 100%;
    margin-top: 0;
  }
}

.wrapper h2 {
  text-align: center;
}