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.

@media screen and (min-width: 768px) {
    .header {
        flex-direction: row;
    }

    .main-nav {
        order: 1;
    }
}

To simplify the code, let’s eliminate the order rule of the menu by setting up the flex-direction of the header to row-reverse.

@media screen and (min-width: 768px) {
    .header {
        flex-direction: row-reverse;
    }
}

Let’s also set up the flex-grow, flex-shrink, and flex-basis properties using the flex shorthand:

@media screen and (min-width: 768px) {
    .header {
        flex-direction: row-reverse;
    }

    .header__menu {
        flex: 1 1 60vw;
    }

    .header__logo {
        flex: 2 3 40vw;
    }
}

Step 3: Signup text, banner, signup form styling

First, change the .main__cta element’s flex-direction to row.

We have to establish the desired order using a negative value for signup-text. Technically, the other two elements are in their original order. Therefore, no more order rules are needed.

There is no need to change the order rule, because Flexbox does not come with other simplified rules that make it easier to handle the repositioning of the Signup Text element.

Let’s also set the flex-basis of the elements to the desired 30-40-30 ratio.

    .main__cta {
        flex-direction: row;
    }

    .main__banner {
        flex-basis: 40vw;
    }

    .main__signup-text {
        order: -1;
        flex-basis: 30vw;
    }

    .main__signup-form {
        flex-basis: 30vw;
    }   

Step 4: Blog post reordering and layouting

The flex-direction of the .main__blog element should be changed to row. As we will need two rows and two columns, we can make the flex-wrap property of the container wrap. Using the shorthand yields flex-flow: row wrap;.

Set the width property of .main-blog__thumbnail to 50vw.

To move the highlighted post to the front, add a negative order to it. There is no need to eliminate the order property because there is no easier Flexbox rule that achieves the same result.

    .main__blog {
        flex-flow: row wrap;
    }

    .main-blog__thumbnail {
        width: 50vw;
    }

    .main-blog__thumbnail.highlighted {
        order: -1;
    }

Full solution