JSFiddle - React, Tailwind, and code Playground

HTML

<section class="container">
        <div class="col"><div></div></div>
        <div class="col"><div></div></div>
        <div class="col"><div></div></div>
        <div class="col"><div></div></div>
    <!-- А если у нас мобила, то оставляем только первые четыре блока -->
        <div class="col"><div></div></div>
        <div class="col"><div></div></div>
    <!-- Дополнительные колонки, которые будут появляться когда у нас будет планшет -->
        <div class="col"><div></div></div>
        <div class="col"><div></div></div>
</section>

CSS

.container { width: 100%; overflow: hidden; max-width: 960px; border: 1px solid #F00; position: relative; }
.col { float: left; width: 16.666%; background: #EEE; height: 100px; min-width: 100px; position: relative; margin-bottom: 20px; }
.col:nth-child(-n+2) { display: none; }
.col div { margin-right: 20px; background: #CCC; height: 100%; }
    
@media (max-width : 720px) { /* Планшет */
    .col { width: 25%; }
    .col:nth-child(-n+2) { display: block; }
}
@media (max-width : 480px) { /* Мобила альбомом */
    .col { width: 50%; }
    .col:nth-child(-n+2) { display: block; }
}
@media (max-width : 320px) { /* Мобила книжкой */
    .col { width: 100%; }
    .col:nth-child(-n+4) { display: none; }
}