Css 两列布局不正确-侧栏应为次要

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

当主内容超出侧边栏的高度时，我希望主内容文本环绕右侧侧边栏，侧边栏本身根据内容扩展

下面是我用来完成此任务的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>

为上述内容提琴：

此标记的问题在于侧栏在上下文中显示在主内容之前。我尝试移动侧边栏div，使其跟随maintext div，但结果是侧边栏只是出现在主要内容的下方，并自行向右浮动。如图所示：

起初我并不担心这一点，但考虑到搜索引擎优化和我对我的网站的新的响应设计，我试图找到一种方法来获得同样的文本包装效果，但在适当的流动，即主要内容后的侧边栏

简言之，我希望获得与上述代码相同的视觉效果，但在HTML中，maintext div位于边栏div之前