How it's done
This is an advanced layout that requires understanding of bootstrap 3's column and display classes and how to combine them.
In addition to these built-in bootstrap classes, just a couple lines of CSS (below) need to be added to your CSS Override.
This layout is set up using nested, 1-column rows instead of any of the default Higher Logic multi-column rows. See image to the right for the row setup and CSS Wrapper classes for each row.
CSS
.member-home .theme-logic-flexible-mh-layout {
padding: 0 !important;
}
.member-home .theme-logic-flexible-mh-layout > .col-md-12 > div {
margin: 0 !important;
}
'Moving' content and widgets from one column to the other
It can take a bit to wrap your head around this part, but once you get the hang of it you can use it in many places.
While the items appear to be moving from the left to the right and then back again, we're actually hiding the left column entirely on smaller screens while, at the same time, showing content in the right column that was hidden on larger screen sizes.
This means (for the example animation above) that in the page editor there is always an identical Quick Links in the left column and in the right column. When the screen gets smaller, we're hiding the ones in the left column and showing the ones in the right column.
To do this, we are relying on these bootstrap classes to show and hide content/widgets on different size screens.
- hidden-xs
- hidden-sm
- hidden-md
- hidden-lg
- visible-xs
- visible-sm
- visible-md
- visible-lg