Move one element to the end of a list with flexbox [duplicate]

Question

How can I move "3" to the end of the list using CSS?

See jsbin here

ul {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

li {
  border: 1px solid black;
  display: inline-block;
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
}

.end {
  align-self: flex-end; /* this doesn't work; how can I move 3 to the end? */
}

 <ul>
    <li class="end">3</li>
    <li>1</li>
    <li>2</li>
  </ul>

Answer 1

Use the order property. In this case, order: 1 works because the other elements have their order set to 0 by default.

ul {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

li {
  border: 1px solid black;
  display: inline-block;
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
}

.end {
  order: 1;
}

<ul>
    <li class="end">3</li>
    <li>1</li>
    <li>2</li>
  </ul>