Risponsive Grid landing page

Community feedback

• 

  Amal Karim ✅•1,290

  @amalkarimPosted about 2 years ago

  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

  Marked as helpful

  1

  ---

  

  Ayush Kumar•90

  @Ayush211107Posted about 2 years ago

  @amalkarim Thank you very much,sir . i search this while coding on stack-over flow and bootstrap , but i concluded that what i wrote in the code . But solve my headache by suggesting that order property. I have changed the code using order property and uploaded on git hub. Thanks a lot once again.

  0