Flexbox

<h3>Flex Direction: Row</h3>
<div class="container row">
  <div class="inner-div">1</div>
  <div class="inner-div">2</div>
  <div class="inner-div">3</div>
</div>
<h3>Flex Direction: Row Reverse</h3>
<div class="container row-rev">
  <div class="inner-div">1</div>
  <div class="inner-div">2</div>
  <div class="inner-div">3</div>
</div>
<h3>Flex Direction: Column</h3>
<div class="container col">
  <div class="inner-div">1</div>
  <div class="inner-div">2</div>
  <div class="inner-div">3</div>
</div>
<h3>Flex Direction: Column Reverse</h3>
<div class="container col-rev">
  <div class="inner-div">1</div>
  <div class="inner-div">2</div>
  <div class="inner-div">3</div>
</div>

.container {
  display: flex;
  padding: 10px;
  background-color: beige;
}
.container > div {
  background-color: orange;
  padding: 10px;
  margin: 5px;
}
.row {
  flex-direction: row;
}
.row-rev {
  flex-direction: row-reverse;
}
.col {
  flex-direction: column;
  min-height:200px;
}
.col-rev {
  flex-direction: column-reverse;
  min-height:200px;
}