Edit in JSFiddle

<ul>
  <li class="A">BoxA</li>
  <li class="B">BoxB</li>
  <li class="C">BoxC</li>
  <li class="D">BoxD</li>
  <li class="E">BoxE</li>
  <li class="F">BoxF</li>
</ul>

ul {
  display: flex;
  list-style-type: none;
}
ul li {
  flex: 1;
}
ul li.A {
  background: red;
}
ul li.B {
  background: blue;
}
ul li.C {
  background: green;
}
ul li.D {
  background: yellow;
  order: 1
}
ul li.E {
  background: purple;
}
ul li.F {
  background: gray;
  order: -1;
}