Moving sidebars left/right without changing source code ordering
 

Montezuma documentation is presently a little sketchy on source ordering how-to's. Users who want SEO benefits of content loading before any sidebars, but prefer sidebars on the left side have little info to go on.

But having spent an hour or so figuring this out (and having just tested it with good results), I think I'm on a good track, so I figured I'd share this for anyone new to this topic. If anyone on this forum who has some experience with source ordering can chime in and add anything I may have missed, please do so and I'll include that in this post for anyone looking for this info.

The Math
Let's say you have a default layout that has a content area on the left and a sidebar on the right. And let's also say, for the argument sake, that you changed your content area to take up 9 columns, and your sidebar to 3 (for a total of 12):

That means that you have to push the 9-collumn-wide content area by 3 columns, and pull the 3-column-wide sidebar by 9 columns.

In short, content = push3 and sidebar=pull9 (notice you're specifying the amount of pushing and pulling, as opposed to specifying the width of an element)

The code
In Montezuma Options > Main Templates locate the template you wish to modify (or create a copy and assign it to a testing page before you commit) and hunt down the opening <div> tags for each of these two elements. They will look something like this:
All you have to do is add push3 class to the first one and pull9 to the second so they look like this:
The resulting page will look like this:

But most importantly, as far as search engines are concerned, the content will continue to load before the sidebar.

Wow, thanks very much for the explanation (and the wonderful illustrations), I always wondered what those CSS classes were for. Makes it much easier to re-arrange the order of the sidebar, but more importantly, solves the problem of having the sidebar shift under the content on cell phone widths even if it's to the left of the content on a desktop. That is, when you want to move the sidebar to the left, the inclination is to switch the order of the divs so that the widget area div comes before the content div. However, when the screen is narrowed to cell phone width, the content shifts under the sidebar instead of the other way around. Using the push/pull classes instead gives the desired behavior of having the sidebar move under the content.

I haven't tested it, yet, but I'm guessing the same technique can be used with two sidebars, i.e., if you have a content div of col6 followed by two sidebars of col3, you would push the content div by 3 and pull the first sidebar div by 6 so you get a sidebar to the left of the content and another to the right.

You nailed it. I haven't tested this, but that's how it should work, based on what I'm seeing in the grid file.

I have spent the remainder of my evening thinking about different ways to affect each viewport independently. Because adding the .push and .pull classes inside a template file affects the first two viewports (960 and 720), but not the mobile.

So if I wanted to affect the tablet viewport differently from the desktop view, I would have to change the grid CSS file itself (not the most ideal way). I wonder if there is a better way to deal with that, cause hacking grids makes my head hurt (speaking of hacking grids, here is a link to the post on how to save a custom grid to database, so it survives a theme update and can be exported)