Html 搜索引擎优化友好的3列布局

我需要按以下顺序布局一个包含三列的站点：

leftColumn | mainColumn | rightColumn

leftColumn和rightColumn都是广告栏，mainColumn部分包含所有SEO丰富的内容

因此，在代码中，我将用于布局的div按以下顺序放置，以便首先看到主要内容以获得SEO好处：

<div id="mainColumn">
</div>
<div id="leftColumn">
</div>
<div id="rightColumn">
</div>

我也这样做，如果用户从手机浏览页面，他们会首先看到主要内容，而不是广告

所以我的问题是，如何设置列的样式，使它们以正确的顺序显示？

---

这是一个HTML5/CSS3页面。

您可以这样做作为起点：

<div id="mainColumn" class="column">1</div>
<div id="leftColumn" class="column">2</div>
<div id="rightColumn" class="column">3</div>

演示：

这段代码是非常基本的，可能需要IE的修复和对全高背景的支持。您可能想查看此网站了解更多防御策略（强烈推荐）：