Плавающие элементы и изменение

Question

У меня есть 4 различных дивы присвоенные как: HEADER1, HEADER2, Content1 и Content2, каждый из них с плавающей к определенной стороне (слева или справа), как показано на image1

До сих пор все работает отлично :)! Также добавлен @media для отзывчивого результата, поэтому, если браузер меньше 750px, тогда все становится на 100% шире.

И вот моя проблема, я пытаюсь показать элементы, как в этом втором изображении:

Но до сих пор, заголовок 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>