.parent1 {
display: flex;
flex-direction: row;
}

.parent2 {
display: flex;
flex-direction: row-reverse;
}

.parent3 {
display: flex;
flex-direction: column;
}

.parent4 {
display: flex;
flex-direction: column-reverse;
}

.children {
width: 100px;
height: 100px;
margin: 5px;
text-align: center;
}

.parent1 .children {
background: #f15c22;
color: #fff;
}

.parent2 .children {
background: #1e8d96;
color: #fff;
}

.parent3 .children {
background: #e7ba21;
color: #fff;
}

.parent4 .children {
background: #125e8b;
color: #fff;
}

<h2>flex-direction: row;</h2>

<div class="parent1">
<div class="children">1</div>
<div class="children">2</div>
<div class="children">3</div>
<div class="children">4</div>
</div>

<h2>flex-direction: row-reverse;</h2>
<div class="parent2">
<div class="children">1</div>
<div class="children">2</div>
<div class="children">3</div>
<div class="children">4</div>
</div>

<h2>flex-direction: column;</h2>
<div class="parent3">
<div class="children">1</div>
<div class="children">2</div>
<div class="children">3</div>
<div class="children">4</div>
</div>

<h2>flex-direction: column-reverse;</h2>
<div class="parent4">
<div class="children">1</div>
<div class="children">2</div>
<div class="children">3</div>
<div class="children">4</div>
</div>