Using ruby for content reordering is a ghastly idea, quite apart from Firefox mangling it. The best way to do this nowadays is flexbox’s `order` property. Browser support is very good (in the IE world, it was introduced in version 10). Do bear in mind that this is purely a visual reordering; screen readers, tab indexes and so forth still operate on DOM order.
CSS Grid is also an option in such cases for slightly more advanced layouts, though with less support. Flexbox and Grid share most of their magic functionality (e.g. align-content et al. apply to both); most things that you can do with CSS Grid can be done with flexbox as well. (When people say “CSS Grid lets us do this magic thing!” my first action is to rewrite it in flexbox; I can almost always do it without much thought, and only occasionally is it not possible at all—and those are the cases I wish people would focus on!)
The other layout examples use absolute positioning also, and they’d be much nicer and more flexible with flexbox (or grid, if you’re OK with the reduced support). Doing so lets you adjust the layout much more easily for varying viewports, not need to hardcode header dimensions and so forth.
And flexbox would help the Layout chapter enormously.