JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
</div>

CSS

div {
    max-width:960px;
    margin:0 auto;
}
div > div {
    width:450px;
    height:60px;
    border:2px #000 solid;
    float:left;
    text-align:center;
}
div > div:nth-child(even) {
    float: right;
}
@media (max-width: 904px) {
    div > div:nth-child(even) {
        float: left;
    }
}