JSFiddle - React, Tailwind, and code Playground

HTML

<div class="holder">
    <div class="one card"></div>
    <div class="two card"></div>
    <div class="three card"></div>
</div>
<div class="holder">    
    <div class="three card"></div>    
    <div class="two card"></div>
    <div class="one card"></div>
</div>

CSS

.holder{
    display: block;
}
.card{
    width: 100px;
    height:100px;
    display: inline-block;
}
.one{
    background: green;
}
.two{
    background: red;
}
.three{
    background: blue;
}

@media (max-width: 400px){
     .holder .card { display: block; }

    .holder + .holder {
        display: table;
    }
    .holder + .holder .three {
        display: table-footer-group;
    } 
    .holder + .holder .card:before {
      display: inline-block;
      content: "";
      height: 100px;
      width: 1px;
    }
    .holder + .holder .one {
        display: table-header-group;
    } 
}