Responsive Card Section using Flexbox

Hi @mkhantk

I love your solution, great use of flexbox but I noticed that your design is not so responsive at screen sizes between 766px and 1000px. Making this section responsive using css grid is really easy, but if you want to use flexbox, you can create a media breakpoint between those two dimensions and add the following css to the main element:

main {
    flex-wrap: wrap;
    flex-direction: row;
}

Then change flex-direction of the second div in the main element to row:

    flex-direction: row;

Then change the flex order of the last div in the main element:

    order: -1;

This will improve the display between these screen sizes, or alternatively you could use css-grid.

I hope this helps. Great work on the solution.