Controlling flow/breaks of columns across breakpoints

Hey guys and gals,

Looking for tips to control asymmetrical columns across breakpoints.

Let’s say I have a row with two columns. One side is 8x and the other is 4x for a total of 12.
Below this, I have a similar row but with the inverse setup: first column is 4x and second is 8x.

This is pretty standard with alternating content for a more “dynamic” layout.

I was reaaaaally hoping that the intuitive interface in the Blocs app for controlling layout and offset would be respected across breakpoints just like classes: it is so satisfying and quick to edit the same class on each specific breakpoint, and then it just works.
But it seems that how many columns an element uses and its offset is global and can’t be adjusted on a ‘per breakpoint’ level?

How do you solve this? I haven’t found classes per element to as predictable due to the flowing nature of things in a responsive environment. I’ll admit that I’m not up to speed what the best way is to control flow with, let’s say, Flex-containers and so on.

Would very much like to solve this with a ‘column layout per breakpoint’ if possible. Any way to target this?

:pray:t2:

Update: after watching a video I see that I was wrong and it works the way I wanted it to: rearranging the column layout per breakpoint is respected by Blocs—great!

I had not been explicit in my first trials, by actively SETTING each value manually, so I think I had some “cascading” behavior confusing me. Anyway… all good. Looing forward to working with layouts like this.

2 Likes