JSFiddle - React, Tailwind, and code Playground

HTML

<div class="box">
<div class="ord3">First in source, but 3rd in Order</div>
<div class="ord2">Second in source, still 2nd in order</div>
<div class="ord1">Third in source, but 1st in order</div>
</div>

<br>
<br>

<div class="box">
<div class="ord3 withHeight">First in source, but 3rd in Order</div>
<div class="ord2">Second in source, still 2nd in order</div>
<div class="ord1">Third in source, but 1st in order</div>
</div>

<p><b>Note:</b> The box-ordinal-group property is not supported in IE or Opera.</p>

CSS

.box
 {
 display:-moz-box; /* Firefox */
 display:-webkit-box; /* Safari and Chrome */
 display:box;
 }
 
.ord1, .ord2, .ord3{
    border:1px solid black; 
    margin:10px; 
    padding:5px;
    -webkit-box-flex:1;
}
 
 .ord1
 {
 -moz-box-ordinal-group:1; /* Firefox */
 -webkit-box-ordinal-group:1; /* Safari and Chrome */
 box-ordinal-group:1;
 }

.ord2
 {
 -moz-box-ordinal-group:2; /* Firefox */
 -webkit-box-ordinal-group:2; /* Safari and Chrome */
 box-ordinal-group:2;
 }
 
.ord3
 {
 -moz-box-ordinal-group:3; /* Firefox */
 -webkit-box-ordinal-group:3; /* Safari and Chrome */
 box-ordinal-group:3;
 }

.withHeight{
-webkit-box-flex:2;
}