<header>Row:</header>
<div class="container1 container">
  <div class="item1 item">1</div>
  <div class="item1 item">2</div>
</div>

<header>Row-reverse:</header>
<div class="container2 container">
  <div class="item2 item">1</div>
  <div class="item2 item">2</div>
</div>

<header>Column:</header>
<div class="container3 container">
  <div class="item3 item">1</div>
  <div class="item3 item">2</div>
</div>

<header>Column-reverse:</header>
<div class="container4 container">
  <div class="item4 item">1</div>
  <div class="item4 item">2</div>
</div>
header {
  font-size: 30px;;
  margin: 20px;
}

.container {
  background-color: purple;
  padding: 20px;
  display: flex;
}

.item {
  background-color: orangered;
  margin: 5px;
  padding: 30px;
  color: #fff;
}

.container1 {
  flex-direction: row;
}

.container2 {
  flex-direction: row-reverse;
}

.container3 {
  flex-direction: column;
}

.container4 {
  flex-direction: column-reverse;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.