Responsive grid divisions wrap left to right (top to bottom) when display size changes down . can we change

  • 2
  • Question
  • Updated 2 years ago
  • Answered
Responsive grid divisions wrap left to right (top to bottom) when display size changes down . can we change this order for mobile/smaller displays somehow as a left hand menu makes sense on a desktop page but not a phone screen?
Photo of David Forder

David Forder

  • 2,144 Points 2k badge 2x thumb

Posted 2 years ago

  • 2
Photo of Stephen Sells

Stephen Sells, Official Rep

  • 16,856 Points 10k badge 2x thumb
Since this is a change in functionality for the design team, would you mind switching this post from a "question" to an "idea"?
Photo of David Forder

David Forder

  • 2,144 Points 2k badge 2x thumb
I dont mind switching to an idea but I am desperate for a solution also using javascript to deliver this in the mean time? ... anyone )
Photo of Stephen Sells

Stephen Sells, Official Rep

  • 16,856 Points 10k badge 2x thumb
Can you describe more about what you're doing and what you want to accomplish? If you could provide pictures, that would be very helpful.
Photo of Jannik Gysi

Jannik Gysi

  • 594 Points 500 badge 2x thumb
Hi David

Theres a CSS attribute on the responsive grid, which specifies, how the divisions should wrap. If you add a class to your grid and then apply the following CSS:
.your-class.sk-grid{
    flex-wrap: wrap-reverse;
}
Your grid will wrap reverse. If you now wrap that into a CSS media query, you should be able to change that, according to the device or the screen size.
Photo of David Forder

David Forder

  • 2,144 Points 2k badge 2x thumb
Jannik .. that worked perfectly! Thanks all for the tips