JSFiddle - React, Tailwind, and code Playground

by jay_zou

HTML

<div class="wrap">
        <div class="box order1" style="background-color:red;">
        	<p>order1--A</p>
        </div>
        <div class="box order3" style="background-color:lightblue;">
        	<p>order3--B</p>
        </div>
        <div class="box order2" style="background-color:yellow;">
        	<p>order2--C</p>
        </div>
    </div>

CSS

.wrap {
	        display: -webkit-flex;
	        display: flex;
	    }
	    .order1{
	    	order: 1;
	    }
	    .order2{
	    	order: 2;
	    }
	    .order3{
	    	order: 3;
	    }
	    .box {
	        width: 150px;
	        height: 150px;
	        display: flex;
	    	justify-content: center;
	    	align-items: center;
	    }