Order Solution

Step 1: Set up the breakpoint

Let’s set up a responsive breakpoint at 768px. We will keep all styles of the basic mobile layout and override the differences only.

@media screen and (min-width: 768px) {

}

Step 2: Styling the header

The flex-direction: column; rule should become a flex-direction: row; rule in the header.

To swap the Main Nav and the Logo elements, we can either add a flex-direction: row-reverse; rule to their container, or we can use an order value on at least one of the elements. We will define the main-nav to have an order of 1. ...