双列布局不在适当的流程中 - 侧边栏应该是次要的

Question

对于我们网站的主页，我们有一个主要的介绍内容区域和一个右侧边栏。

当主要内容超出侧边栏的高度（它本身根据内容扩展）时，我希望主要内容文本围绕右侧边栏“包裹”。

下面是我用来完成此操作的css和标记（我为 Lorum ipsum 提前道歉，我使用它来显示主要内容文本如何“包裹”在右侧边栏周围） ：

#container { width:100%; position:relative; padding:0; }
#maintext {}
#sidebar { float:right; width:200px }

<div id="container">

    <div id="sidebar">
      <ul>
      <li>Secondary</li>
      <li>Secondary</li>
      <li>Secondary</li>
      </ul>
    </div>

    <div id="maintext">
      <p>More important intro text appearing AFTER sidebar in HTML flow: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas  bibendum pharetra est eu aliquet. In lacinia est non augue egestas, nec  sodales felis euismod. Curabitur lacus enim, egestas quis pharetra non,  molestie ut nisi.</p>
      <p>Cras eleifend, ante non elementum rhoncus, odio metus  dapibus quam, eget aliquam risus odio et lorem. Suspendisse euismod urna  cursus ligula commodo ultrices. Integer vulputate ante eu lectus  consequat mattis. Donec tristique massa at lectus viverra congue.  Maecenas elementum justo vel pretium pulvinar. Phasellus at tortor  metus. Quisque at ligula metus. Nulla euismod ipsum sit amet ullamcorper  sollicitudin. Sed accumsan libero vitae magna fermentum aliquam. Nunc  nec nisi diam. Morbi iaculis bibendum rhoncus. Pellentesque sagittis  bibendum felis in gravida.</p>
    </div>  

</div>

上述小提琴：http://jsfiddle.net/Ezbd9/1/

此标记的问题在于侧边栏在主要内容之前出现在上下文中。我尝试移动#sidebar div，使其跟随#maintext div，但结果是侧边栏只显示在主要内容下方，自动向右浮动。如下所示：http://jsfiddle.net/Fct8F/1/

最初我并不担心这一点，但考虑到SEO以及我对我的网站的新响应式设计我试图找到一种方法来获得相同的文本包装效果但是在正确的流程中（即主要内容后面是侧边栏）

简而言之，我希望得到与上面代码相​​同的可视化结果，但是在#maintext div之前使用HTML中的#sidebar div。