<h3>1. row</h3>
<div class="row">
  <div class="box1">1</div>
  <div class="box2">2</div>
  <div class="box3">3</div>
</div>

<h3>2. column</h3>
<div class="column">
  <div class="box1">1</div>
  <div class="box2">2</div>
  <div class="box3">3</div>
</div>

<h3>3. row-reverse</h3>
<div class="row-reverse">
  <div class="box1">1</div>
  <div class="box2">2</div>
  <div class="box3">3</div>
</div>

<h3>4. column-reverse</h3>
<div class="column-reverse">
  <div class="box1">1</div>
  <div class="box2">2</div>
  <div class="box3">3</div>
</div>
.row {
  display: flex;
  flex-direction: row;
  padding: 10px;
  background: seagreen;
}

.column {
  display: flex;
  flex-direction: column;
  padding: 10px;
  background: seagreen;
}

.row-reverse {
  display: flex;
  flex-direction: row-reverse;
  padding: 10px;
  background: seagreen;
}

.column-reverse {
  display: flex;
  flex-direction: column-reverse;
  padding: 10px;
  background: seagreen;
}

.box1 {
  width: 100px;
  height: 50px;
  background: salmon;
}
.box2 {
  width: 50px;
  height: 50px;
  background: skyblue;
}
.box3 {
  width: 70px;
  height: 50px;
  background: yellow;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.