<div class="content">
  <div class='container' style="flex-direction: row">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
  </div>
  <div class='container' style="flex-direction: row-reverse">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
  </div>
  <div class='container' style="flex-direction: column">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
  </div>
  <div class='container' style="flex-direction: column-reverse">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
  </div>
  <div class='container'>
    <div class="box" style="order:2">1</div>
    <div class="box" style="order:0">2</div>
    <div class="box" style="order:1">3</div>
  </div>
</div>
.content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.container + .container {
  margin-top: 10px
}

.container {
  display: flex;
}

.box {
  width: 100px;
  height: 100px;
  border: 2px solid black;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 42px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.