JSFiddle - React, Tailwind, and code Playground

HTML

<div class="column" id="col-1"><h2>One</h2></div>
<div class="column" id="col-2"><h2>Two</h2></div>
<div class="column" id="col-3"><h2>Three</h2></div>
<div class="column" id="col-4"><h2>Four</h2></div>

CSS

body { margin: 0; padding: 0; }

.column {
    width: 200px;
    display: inline;
    float: left;
    overflow: hidden;
}

.column h2 { text-align: center; }

#col-1 { padding: 400px 0; background: #ccf; }
#col-2 { padding: 200px 0; background: #fcc; }
#col-3 { padding: 300px 0; background: #cfc; }
#col-4 { padding: 100px 0; background: #ccc; }

@media (max-width: 800px) {
    body { width: 600px; }
    #col-3 { float: right; }
    #col-4 { display: block; float: none; }
}

@media (max-width: 600px) {
    body { width: 400px; }
    #col-1, #col-4 { float: left; clear: left; }
    #col-2, #col-3 { float: right; clear: right; }
}

@media (max-width: 400px) {
    body { width: 200px; }
    .column { display: block; float: none; }
}