The layouts in this template use css flexbox to provide responsive structure. When the screen width falls below a certain point, the page switches to a single column layout. For wider screens flexbox allows the columns to grow and shrink to fill the space. For more information about flexbox check out this useful guide.
Items in a flexbox container can be given an order property in css to alter their orders. On the Left Side Panel page, this is used to shift the secondary column to the left of the primary column when the screen width allows them to be displayed side by side. But when the screen is narrow, they revert to their standard order and the secondary panel is shown below the primary.
This template also uses a fluid font size, which changes as the screen width changes, and a set of text-block classes which attempt to maintain a comfortable line length. For more information on these see the stylesheets fluidType.css and layout.css.
The table control at the bottom of this page is not suited for mobile display so the class mobile-hide has been added to hide it when the page width is small.
You can either download the full theme pack or individual themes using the link at the top of the page. If downloading the full theme pack, please refer to the step below which you should follow once the pack is installed.