Another Grid Layout Puzzle

Hello again… Here’s another puzzle for you UIKit masters (I’m looking at you @Lucas )

I have an alternating ‘text-image’ / ‘image-text’ grid… basic stuff, however mine are alternating down the page.
Like this:

When the page shrinks to one column I need the order to flip on every other pair, so it goes ‘text-image’ every time otherwise it looks odd, like this:

I thought the way to go would be to use ‘.uk-flex-column-reverse’ on the grid, but nothing happens when I do that… Is there a way of forcing the widths to change their order when on small screens?

Thanks folks.

p.s. I can do this with ‘Sidebar’ from BWD but would like to implement in UIKit if possible (and I’m sure it will be :-) )

In the Flex stack you can set the “Order” at certain breakpoints.


Ah yes… So use the flex stack with cards and don’t even bother with the grid stack… Cheers Neil. I always jump for the grid stack for layout and I probably shouldn’t!

edit: I couldn’t really get that working as the cards won’t stay the size I want… I ended up using Sidebar. Simple and does the job.

I think what you are trying to do is demo’d on the UiKitter Skyline project:

That first grid changes stacking order compared to unstacked. And as Neil says, it’s using the UK-flex-first@x class in the Grid width stack that you want to change the stacking order of.

Hi Steve @steveb,

That’s exactly what I want to achieve and weirdly, that’s exactly how I was doing it but for me it wasn’t working. I added ‘uk-flex-first@s’ but nothing happened… Syntax error??

I will have another go… Must be doing something wrong…

I must get around to buying your project too

Most likely you didn’t enable breakpoints?

This is how those columns are setup…

Genius! I owe you a pint sir! That’s exactly the problem…


That’s pushing reality a bit far mate!

1 Like