First time using CSS Grid And SCSS

@adluders But how to achieve changing sections order in flexbox? It's possible but not in the way the challenge wanted. As described in the next image, The challenge wanted sections order to change in the mobile view. https://ibb.co/6nJQXPs

@ibnsamy96 Use the order property on the flexible element you want to change

@ibnsamy96, @mtc-21 answered below. There is an order property in CSS which you can use to dictate what order something gets displayed as. The main pitfall with it it's I don't believe it's accessible

@Mtc-21 @adluders I know about the flexbox order attribute but if you saw how the design should be in the mobile view, you would find that at using flexbox, it needs to change HTML elements structure in the mobile view, not just the css values. To make my point clear, let's assume that we structred our html code like that:

<main>
    <div>
        <img src="logo.png"/>
        <div>We're Coming Soon</div>
    </div>
    <img src="girl-image.jpg"/>
</main>

And we used the next css rules in the desktop view:

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

In this case, using flex-direction in mobile view to be a column won't help as it will put the content in a vertical way ( logo => content => girl-image ). And if we changed orders we can make it ( girl-image => logo => content ) not ( logo => girl-image => content ) as the html structre prevents us from doing so.

I don't know if I'm still missing the point 😕

@ibnsamy96 that's a good point, maybe I was mistaken. I think it is possible with flex but I'd have to sit at my computer and test it out. I feel like maybe having everything as an individual div and play with the heights should work but I can't test it to know for sure. I'll test my theory out when I get on my computer and will let you know how my experience goes.

@ibnsamy96 see the example, I hope this helps you, link in one of the challenges use this property, if you want you can see it this type of designs is better to work with grid and do not have to complicate in the relocation of the elements, because with grid-column and grid-row decide where the only one, to change the resolution with a media query

@adluders Great, I'll try to test it too.

@ibnsamy96 How did it go?

@ibnsamy96 Hi, how are you doing? Just in the challenge I posted yesterday, I used flexbox and order in the form to change the order of the span tag.

@ibnsamy96 ayye glad you found an alternative solution