Flex Direction

Row

<div class="flex flex-row bg-gray-light">
    <div class="white bg-blue p-3 m-1">block 1</div>
    <div class="white bg-blue p-3 m-1">block 2</div>
    <div class="white bg-blue p-3 m-1">block 3</div>
</div>
block 1
block 2
block 3

Row Reverse

<div class="flex flex-row-reverse bg-gray-light">
    <div class="white bg-blue p-3 m-1">block 1</div>
    <div class="white bg-blue p-3 m-1">block 2</div>
    <div class="white bg-blue p-3 m-1">block 3</div>
</div>
block 1
block 2
block 3

Column

<div class="flex flex-column bg-gray-light">
    <div class="white bg-blue p-3 m-1">block 1</div>
    <div class="white bg-blue p-3 m-1">block 2</div>
    <div class="white bg-blue p-3 m-1">block 3</div>
</div>
block 1
block 2
block 3

Column Reverse

<div class="flex flex-column-reverse bg-gray-light">
    <div class="white bg-blue p-3 m-1">block 1</div>
    <div class="white bg-blue p-3 m-1">block 2</div>
    <div class="white bg-blue p-3 m-1">block 3</div>
</div>
block 1
block 2
block 3

Responsive

Flex direction can be set responsive. Set direction row in md devices using class .md-flex-row

<div class="flex flex-column md-flex-row">
    <div class="... flex-equal">block 1</div>
    <div class="... flex-equal">block 2</div>
    <div class="... flex-equal">block 3</div>
</div>
block 1
block 2
block 3
Responsive variants
.sm-flex-row
.md-flex-row
.lg-flex-row
.xl-flex-row
.sm-flex-row-reverse
.md-flex-row-reverse
.lg-flex-row-reverse
.xl-flex-row-reverse
.sm-flex-column
.md-flex-column
.lg-flex-column
.xl-flex-column
.sm-flex-column-reverse
.md-flex-column-reverse
.lg-flex-column-reverse
.xl-flex-column-reverse