Responsive columns

Design help Layout & Design
1

I am trying to take 3 columns (or rows depending on how I can do this in either columns or grid) and stack them on top of each other when they hit the tablet breakpoint. I have it formatted at 6-3-3 on desktop. When I hit 786px I want the rows to stack like so…

image (6)
text (3)/text (3)

any ideas what I am missing in my formatting in the builder?

https://preview.webflow.com/preview/kristofers-ux-portfolio?utm_medium=preview_link&utm_source=designer&utm_content=kristofers-ux-portfolio&preview=022412e910887f62059d4cd4e6070960&pageId=60a2cc3e2658ea14773f422e&workflow=preview

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

Use grids within grids.
At each breakpoint, you can change their flow rules to create the arrangement rules you want.

If I understand what you’re trying to do, you’d wrap these 2 in a grid, let’s call it Grid 33;

image

At desktop bp, Grid 32 and Grid 33 would both flow horizontally.
At tablet bp, Grid 32 would flow vertically, and Grid 33 would flow horizontally.

That would change;

[My Process] -------------------------- [UX Skills] ----- [Soft Skills] -----

To

[My Process] -------------------------- 
[UX Skills]  -----  [Soft Skills] -----
3

Wicked Awesome! That was it exactly! I don’t know why I didn’t think of that. Thank you so much!

1 Like