JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<div class="a">
    <div class="b">1</div>
    <div class="b">2</div>
    <div class="b">3</div>
    <div class="b">4</div>
</div>

CSS

.a {
    display: flex;
    flex-wrap: wrap;
}
.b {
    width: 25%;
    margin: 20px 0;
}
@media (max-width: 700px){
    .a {
        flex-direction: column-reverse;
    }
    .b {
        width: 50%;
    }
}