Risponsive Grid landing page

Hi, Ayush 👋

Nice to see this project being finished. I myself took this challenge but up until now, I haven't done it yet.

Pardon me if I'm wrong, but I assume you mean that you have difficulty reversing the "order of the image", instead of placed below the text, you want to place it above the text in mobile view. If that's what you want, we can easily achieve it using order property. Try this:

@media (max-width: 1200px)
.only-big-screen {
    /* position: absolute; */
    /* left: -999em; */
}
.only-big-screen .box {
    order: -1;
}

That means, when browser width are less than or equal 1200px, the box will be placed before the previous <div>.

Then you can remove <div class="row flex-sm-column-reverse not-only-big-screen"> and its content altogether.

Hope this helps