The technique:
- Set up CSS-based column layout as normal.
- Name (ID) columns with semantic names: "
main
", "sidebar
"
- avoid names that imply visual characteristics or order:
like "left-column
" and "right-column
"
- Create additional rule sets using alternate layout name IDs.
- Naming suggestion: use column ID initials in the order you want them to appear.
M
= main, S
= sidebar, ...
- Use
"SM"
if the Sidebar should appear on the LEFT
- Precede each selector with the layout name ID.
#main {}
becomes #SM #main {}
#sidebar {}
becomes #SM #sidebar {}
- To change the layout, apply the new layout ID to the
<body>
tag.
95