Skip to main content

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?

Since this is a change in functionality for the design team, would you mind switching this post from a “question” to an “idea”?


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 )


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.


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.


Jannik … that worked perfectly! Thanks all for the tips