浮动元素和重新定位

Question

我将4个不同的div分配为：header1，header2，content1和content2，每个div都浮动到特定的一侧（左侧或右侧），如image1所示

到目前为止一切正常:)！还为响应结果添加了@media，因此如果浏览器小于750px，那么一切都变为100％宽。

这是我的问题，我正试图展示第二张图片中的元素：

但是到目前为止，Header 2正显示在header1之下，我试图首先找到内容1，然后用他的各自内容2显示标题2，你能帮我解决这个问题吗？这是我的实际jsfiddle和我的代码：

DEMO

HTML

 <div id="container">
    <div id="header1">
       <h2 class="header1">
         Header 1
       </h2>
    </div>
    <div id="header2">
       <h2 class="header2">
         Header 2
       </h2>
    </div>

    <div id="content1">
         content1
    </div>

    <div id="content2">
         content2
    </div>
 </div>

感谢您的帮助！

Answer 1

如果你可以接受，你可以将标题与内容结合起来。 见http://jsfiddle.net/pbrzt7er/

<div class='left container'>
    <div class='header'>
        Header left
    </div>
    <div class='content'>
        Content left
    </div>
</div>
<div class='right container'>
    <div class='header'>
        Header right
    </div>
    <div class='content'>
        Content right
    </div>
</div>