From the course: Advanced Responsive Layouts with CSS Flexbox
Unlock the full course today
Join today to access over 22,600 courses taught by industry experts or purchase this course individually.
Changing from holy grail to vertical display - CSS Tutorial
From the course: Advanced Responsive Layouts with CSS Flexbox
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…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.