You can use this CSS3 property : flex-wrap: wrap-reverse
.
#tabs ul {
display: flex;
flex-wrap: wrap-reverse;
list-style:none;
margin:0;
padding:0;
}
#tabs li {
margin:5px 0 0 -1px;
border:1px solid #ccc;
padding:5px 10px;
}
#tabs {
border:1px solid red;
padding:0 5px 5px 5px;
}
<div id="tabs">
<ul>
<li><a href="#"><span>Tab 0</span></a>
</li>
<li><a href="#"><span>Tab 1</span></a>
</li>
<li><a href="#"><span>Tab 2</span></a>
</li>
<li><a href="#"><span>Tab 3</span></a>
</li>
<li><a href="#"><span>Tab 4</span></a>
</li>
<li><a href="#"><span>Tab 5</span></a>
</li>
<li><a href="#"><span>Tab 6</span></a>
</li>
<li><a href="#"><span>Tab 7</span></a>
</li>
<li><a href="#"><span>Tab 8</span></a>
</li>
<li><a href="#"><span>Tab 9</span></a>
</li>
</ul>
</div>