JSFiddle - React, Tailwind, and code Playground

by Hashem Qolami

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">three</div>    
    <div class="two card">two</div>
    <div class="one card">one</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: 600px) {
    .card {
        display: block;
    }

    .holder + .holder {
        -webkit-transform: rotate(180deg);
        -moz-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
        -o-transform: rotate(180deg);
        transform: rotate(180deg);
    
        direction: rtl;
    }

    .holder + .holder .card {
        -webkit-transform: rotate(-180deg);
        -moz-transform: rotate(-180deg);
        -ms-transform: rotate(-180deg);
        -o-transform: rotate(-180deg);
        transform: rotate(-180deg);
        
        direction: ltr;
    }
}