From the course: Advanced Responsive Layouts with CSS Flexbox

Unlock the full course today

Join today to access over 22,400 courses taught by industry experts or purchase this course individually.

Changing from holy grail to vertical display

Changing from holy grail to vertical display - CSS Tutorial

From the course: Advanced Responsive Layouts with CSS Flexbox

Start my 1-month free trial

Changing from holy grail to vertical display

- Switching the sidebar position without changing the markup of the page is one of the neat things that FlexBox allows us to do, but it's not the only thing, If you think back, you'll remember that the content area, that contains both main content and the sidebar, has its Flex Direction Property set to roll, which is the default. But if we change the Flex Direction Property to column, then one item will be positioned on top of the next, and if we make that change in the browser right now, our order property changes, but our trigger by the sidebar position will still take effect. So, we could display our content with either the sidebar on top then the main content, or with the main content on top and then the sidebar. To achieve this, I'll use this third trigger here that just looks like a vertical stack. This can all be achieved using the same exact procedure we used in the previous movie. We need three components: First, we need a button to trigger the event, then we need a…

Contents