JSFiddle - React, Tailwind, and code Playground

HTML

<div class="small">
    <div class="item">1</div>
    <div class="item">2<br>line 2.2</div>
    <div class="item">3</div>
    <div class="item">4<br>line 4.2<br>line 4.3</div>
    <div class="item">5</div>
    <div class="item">6</div>
</div>
<div class="large">
    <div class="list">
        <div class="item">1</div>
        <div class="item">4<br>line 4.2<br>line 4.3</div>
    </div>
    <div class="list">
        <div class="item">2<br>line 2.2</div>
        <div class="item">5</div>
    </div>
    <div class="list">
        <div class="item">3</div>
        <div class="item">6</div>
    </div>
</div>

CSS

.small, .large {
    background: #dfd;
    width: 100%;
}
.small {
    padding: 5px;
}
.large {
    display: none;
}
.item {
    background: #ffd;
    text-align: center;
    border: 1px solid black;
}
.item + .item {
    margin-top: 5px;
}

@media (min-width: 600px) {
.small {
    display: none;
}
.large {
    display: table;
    border-spacing: 5px;
}
.list {
    width: 100%;
    display: table-row;
}
.item {
    width: 50%;
    display: table-cell;
}
}