How to stack split flexbox? just like webflow's ebook layout?

i have a layout much like - https://flexbox.webflow.com/#sidebar

however, when i go to mobile, the left hand side basically goes away. what i’d like is exactly how things are working in the webflow ebooks - Web design 101 | A free Webflow ebook - when switching to a mobile view, the left hand sidebar then moves to the top.

how is this done? i’ve been fiddling around for awhile, and am totally clueless. any help would be great. thanks!

by dumb luck, found their tutorial. in case anyone has the same question, the youtube link below jumps to what should have answered my question: How to build our eBook website - YouTube

hwoever, it didn’t work at all for me. so, in light of that, here’s the webflow link for my site -
https://preview.webflow.com/preview/k3dtest?preview=695d70903e58f8e829ae9fc17a918c69

please, go to pages > “my page” to get the the page with this issue. clearly, there’s something different about the setup. main problem seems to be my left-hand side div sits under the right-hand side div. in any case, i’m clueless what to try at this point, so desperate for any ideas.

It’s easy, there’s no flexbox on mobile (portrait & landscape). See the code:

@media (max-width: 767px)
.leftside {
position: relative;
display: block;
width: 100%;
height: auto;
padding-top: 1px;
padding-bottom: 45px;

In other words: disable the flexbox on mobile, just click to display block. And give it 100% width. That’ll get you what you want.

1 Like

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.