JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper" style="display: flex; width: 100%; flex-wrap: wrap; justify-content: center;">
    <div id="content" style="display: inline-block; flex: 13px; text-align: center; background-color: red; border: 3px solid grey; height: 200px; min-width: 150px; max-width: 250px;">
      Hey!
    </div>
    <div id="content" style="display: inline-block; flex: 13px; text-align: center; background-color: red; border: 3px solid grey; height: 200px; min-width: 150px; max-width: 250px;">
      Hey!
    </div>
    <div id="content" style="display: inline-block;flex: 13px; text-align: center; background-color: red; border: 3px solid grey; height: 200px; min-width: 150px; max-width: 250px;">
      Hey!
    </div>
    <div id="content" style="display: inline-block;flex: 13px; text-align: center; background-color: red; border: 3px solid grey; height: 200px; min-width: 150px; max-width: 250px;">
      Hey!
    </div>
    <div id="content" style="display: inline-block;flex: 13px; text-align: center; background-color: red; border: 3px solid grey; height: 200px; min-width: 150px; max-width: 250px;">
      Hey!
    </div>
    <div id="content" style="display: inline-block;flex: 13px; text-align: center; background-color: red; border: 3px solid grey; height: 200px; min-width: 150px; max-width: 250px;">
      Hey!
    </div>
  </div>

CSS

body {
   margin: 0;
}
#wrapper div {
  box-sizing: border-box;
}
@media (max-width: 900px) {
  #wrapper div:nth-child(6) {                /*  6th child  */
    max-width: calc(100% / 5) !important;
  }
}
@media (max-width: 750px) {
  #wrapper div:nth-child(n+5) {              /*  from 5th child  */
    max-width: calc(100% / 4) !important;
  }
}
@media (max-width: 600px) {                  /*  from 4th child  */
  #wrapper div:nth-child(n+4) {
    max-width: 250px !important;
  }
}