How to put a wrapped row in reverse order-CodePudding

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>

CodePudding user response：

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>