e

column-reverse.scss

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

column.scss

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

row-h-position.scss

.row-left,
.row-reverse.row-right{
  justify-content: flex-start;
}

.row-center{
  justify-content: center;
}

.row-right,
.row-reverse.row-left{
  justify-content: flex-end;
}

row-reverse.html

<div class="row-reverse">
    <div class="cel">1</div>
    <div class="cel">2</div>
    <div class="cel">3</div>
    <div class="cel">4</div>
</div>

row-reverse.scss

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

row-v-position.scss

.row-top{
    align-items: flex-start;
}
.row-middle{
    align-items: center;
}
.row-bottom{
    align-items: flex-end;
}

row.html

<div class="row">
    <div class="cel">1</div>
    <div class="cel">2</div>
    <div class="cel">3</div>
    <div class="cel">4</div>
</div>

row.scss

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