The technique:

  1. Set up CSS-based column layout as normal.
  2. Name (ID) columns with semantic names: "main", "sidebar"
    • avoid names that imply visual characteristics or order:
      like "left-column" and "right-column"
  3. Create additional rule sets using alternate layout name IDs.
  4. 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 {}
  5. To change the layout, apply the new layout ID to the <body> tag.

95