Edit in JSFiddle

<ul class="container1">
  <li class="A">BoxA</li>
  <li class="B">BoxB</li>
  <li class="C">BoxC</li>
</ul>
<ul class="container2">
  <li class="D">BoxD</li>
  <li class="E">BoxE</li>
  <li class="F">BoxF</li>
</ul>
<ul class="container3">
  <li class="G">BoxG</li>
  <li class="H">BoxH</li>
  <li class="I">BoxI</li>
</ul>
<ul class="container4">
  <li class="J">BoxJ</li>
  <li class="K">BoxK</li>
  <li class="L">BoxL</li>
</ul>

ul {
  display: flex;
  list-style-type: none;
  width: 800px;
}
ul li {
  flex: 0 0 50px
}
.container2 {
  flex-direction: row-reverse;
}
.container3 {
  flex-direction: column;
}
.container4 {
  flex-direction: column-reverse;
}
ul li.A {
  background: red;
}
ul li.B {
  background: blue;
}
ul li.C {
  background: green;
}
ul li.D {
  background: red;
}
ul li.E {
  background: blue;
}
ul li.F {
  background: green;
}
ul li.G {
  background: red;
}
ul li.H {
  background: blue;
}
ul li.I {
  background: green;
}
ul li.J {
  background: red;
}
ul li.K {
  background: blue;
}
ul li.L {
  background: green;
}