Flex-direction Solution

The following steps provide a complete solution to the flex-direction exercise:

Step 1: Markup

We could create two divs with three children each for the columns, or three divs with two children each for the rows.

As the order of the boxes should stay natural, and we cannot reposition the inner divs, we will create three rows with two children each:

<div class="flex-container">
  <div class="flex-item">First</div>
  <div class="flex-item">Second</div>
</div>
<div class="flex-container">
  <div class="flex-item">Third</div>
  <div class="flex-item">Fourth</div>
</div>
<div class="flex-container">
  <div class="flex-item">Fifth</div>
  <div class="flex-item">Sixth</div>
</div>

Step 2: Basic CSS setup with media query

We will address the following points:

• The minimum width of the page should be 400 pixels
• Colors: the page

...