Im using flexbox to ordening some elements and i need reverse the elements order with CSS and it gets weird:
|4|3|2|1|
|8|7|6|5|
and I need it to be this way:
|8|7|6|5|
|4|3|2|1|
ul {
list-style: none;
width: 208px;
padding: 5px;
display: flex;
flex-wrap: wrap;
flex-direction: row-reverse
}
li {
min-width: 50px;
height: 50px;
text-align: center;
border: 1px solid red;
color: #FFF;
background-color: #000;
}<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>Just make flex-wrap:wrap-reverse
ul{
list-style: none;
width: 208px;
padding: 5px;
display: flex;
flex-wrap: wrap-reverse;
flex-direction: row-reverse
}
li {
min-width: 50px;
height: 50px;
text-align: center;
border: 1px solid red;
color: #FFF;
background-color: #000;
}<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>