JSFiddle - React, Tailwind, and code Playground

HTML

※htmlの構造は全部同じです。
<div class="test_1">
    <h3>横並び</h3>
<ul>
    <li>AAA</li>
    <li>BBB</li>
    <li>CCC</li>
    <li>DDD</li>
    <li>EEE</li>
</ul>
</div>
<div class="test_2">
    <h3>横並び(逆順)</h3>
<ul>
    <li>AAA</li>
    <li>BBB</li>
    <li>CCC</li>
    <li>DDD</li>
    <li>EEE</li>
</ul>
</div>
<div class="test_3">
    <h3>C/E/A/B/Dと並べます</h3>
<ul>
    <li>AAA</li>
    <li>BBB</li>
    <li>CCC</li>
    <li>DDD</li>
    <li>EEE</li>
</ul>
</div>

CSS

ul {
    list-style: none;
    background-color: #ccc;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: space-between;
    width: 100%;
}

ul li {
    background-color: rgba(150,150,150,.5);
    border: 1px solid black;
    color: #fff;
    min-width: 50px;
    text-align: center;
}

li {
    margin: 2px;
}

.test_1 ul,
.test_3 ul{
    flex-flow: row wrap;
}

.test_2 ul {
    flex-flow: row-reverse wrap;
}

.test_1 li,
.test_2 li,
.test_3 li{
    flex: 1 auto;
}

.test_3 h3 {
    flex: 1 100%;
}

.test_3 li:nth-child(3){
    order: 0;
}
.test_3 li:nth-child(5){
    order: 1;
}
.test_3 li:nth-child(1){
    order: 2;
}
.test_3 li:nth-child(2){
    order: 3;
}
.test_3 li:nth-child(4){
    order: 4;
}