Hey guys,
Ok so I have Flexbox working the way I need it, but was wondering if there was a way to have the following…
I have a 4 Child Flexbox Div so…
1 - 1 - 1 - 1
What I’m trying to get done is this at the Tablet break point…
1 - 1
1 - 1
…then at the Phone break point…
1
1
1
1
Hope that makes some sort of sense. Would be great if someone could point me in the right direction.
Cheers!
For the width of the child divs use 25% at desktop, 50% at tablet and 100% for mobile. Good luck.
Tried that, but it didn’t seem to work. Here’re a link to what I’m building…
(It’s the footer with the 4 DIVs)
https://preview.webflow.com/preview/macjunky-v5?preview=23dd386c8748ff8065617c197ea887c6
Hi @Kia,
I am sure there are many solutions to this. I’ll share with you the way I do it mostly, as I want as much flexibility as possible and also keeping the site performance in mind.
Warp your flex items in two divs. Div#1 gets 2 items, Div#2 gets two items. Then set these Divs (they are now your flex items) to Stretch.
Screenshot of tablet view as proof.
Maybe somebody else has a better way to do it 
Best,
Karl-Heinrich
Alternatively, use the flex settings for the Contact Container, make sure it’s set Horizontal, then check Wrap Children.
Styling for Child Divs
For Tablet
Set all child divs to 40% width
Add 50px bottom Margin to 4-4
Gives you this
For Mobile Landscape
Set all Child Divs to 40% Width
Two right hand divs (2-4 and 4-4) give 5% left Margin
Gives you this
For Mobile Portrait
Set all Child divs to 80% Width
Remove the two 5% margins on 2-4 and 4-4, gives you this
Hope this helps
Ok figured it out, it’s this…
[Wrap Children]
Now I need to make them ‘stick’ to the left & right and not centred. 
Deleting your read-only is probably the best way to achieve this 
