How to make Flexbox side bar stack on mobile

[edblnd (Ed)]

Hey!

I recently learned how to create a fixed side bar layout using Flexbox but notice when I view my site on mobile, I cannot figure out how to make what is the “side bar” on a desktop, stack on top of the main content. By default, of course, they are side-by-side, as they are on mobile.

Does anyone know how to keep the desktop layout, but make these two elements stack on mobile?

Thanks for reading, and any suggestions!

Ed

---

Here is my public share link: LINK
(how to access public share link)

[textileranch (kits)]

Make sure “flex wrapper” is set to wrap children

On mobile you should set the “sidebar” sizing to “0 0 100%”

Also, add a height to your sidebar.

Christian

[cyberdave (Dave S.)]

Hi @edblnd, first thanks to @textileranch for the good suggestions I also have a couple of suggestions:

https://cl.ly/412V2v454232/Screen%20Recording%202016-11-25%20at%2009.56%20AM.mov

I hope this helps!

[edblnd (Ed)]

I am consistently blown away by most things I experience in the world of Webflow. @cyberdave, @textileranch, thank you so much for your support. I went ahead with Dave’s recommendation and it works perfectly.

I truly appreciate your time, guys!

Happy Thanksgiving,

Ed