What is Flex Direction Tailwind

Utilities for controlling the direction of flex items.

Below given class and properties 

flex-row         flex-direction: row;

flex-row-reverse flex-direction: row-reverse;

flex-col         flex-direction: column;

flex-col-reverse flex-direction: column-reverse;

Use flex-row to position flex items horizontally in the same direction as text:

<div class="flex flex-row ...">

  <div>1</div>

  <div>2</div>

  <div>3</div>

</div>

Use flex-row-reverse to position flex items horizontally in the opposite direction:

<div class="flex flex-row-reverse ...">

  <div>1</div>

  <div>2</div>

  <div>3</div>

</div>

Use flex-col to position flex items vertically:

<div class="flex flex-col ...">

  <div>1</div>

  <div>2</div>

  <div>3</div>

</div>

Use flex-col-reverse to position flex items vertically in the opposite direction:

<div class="flex flex-col-reverse ...">

  <div>1</div>

  <div>2</div>

  <div>3</div>

</div>

To apply a flex direction utility only at a specific breakpoint, add a {screen}: prefix to the existing class name. For example, adding the class md:flex-row to an element would apply the flex-row utility at medium screen sizes and above.

<div class="flex flex-col md:flex-row ...">

    <!-- ... -->

  </div>

references:

https://tailwindcss.com/docs/flex-direction