JSFiddle - React, Tailwind, and code Playground

by Pablo Pollono

HTML

<div class="media-row clearfix first">
        <div class="g6 first">
            Column 1
        </div>
        <div class="g6">
            Column 2
        </div>
        <div class="g6 last">
            Column 3
        </div>
    </div>

<div class="media-row clearfix last">
    <div class="g6 first">
        Column 1
    </div>
    <div class="g6">
        Column 2
    </div>
    <div class="g6 last">
        Column 3
    </div>
</div>

CSS

.media-row { margin-bottom: 20px; }
div.g6 { float: left; margin-left: 1.76%; min-height: 20px; overflow: hidden; }
div.g6:first-child { margin-left: 0 }
div.g6 { width: 27.91%; } 
@media only screen and (max-width: 769px) {
    div.g6{
        width: 49%;
        margin-left: 1%;
    }     
}