Jak zmienic kolejność divów posiadających różnych rodziców - RWD

Witam. Sytuacja baaaardzo ogólnie wygląda następująco:

<div class=leftArea>
<div id=content></div>
<div id=info-box></div>
</div>
<div class=rightArea>
<div id=rightInfo></div>
</div>

Przy rozdzielczości < 768px divy układają się jeden pod drugim tzn. leftArea (content => info-box) i rightArea spada pod leftArea. Chciałbym, żeby przy rozdzielczości mniejszej od 768px kolejność divów była następująca: content => rightInfo => info-box. Problem w tym, że info box jest objęty kompletnie innym divem od rightInfo i nie bardzo wiem jak sobie z tym poradzić. Jedyne co mi przyszło do głowy to dodanie do kodu kopii info-box i bawienie się w ukrywanie i pokazywanie tego co mi pasuje, ale to chyba nie jest zgodne z "dobrymi praktykami", a nie chce tworzyć śmieciowego kodu. Może coś z java scriptem, żeby zamienic kolejność tych divów??

https://css-tricks.com/css-media-queries/

niezdecydowany napisał(a):

https://css-tricks.com/css-media-queries/

To przy takiej strukturze niezbyt pomoże. Przy takiej ilości informacji jaką podałeś to jedyna możliwość to "przenieść" divy za pomocą js czyli przekopiować w inne miejsce. Dopikowanie kodu nie jest dobre dlatego trzeba to zrobić js a nie tylko display:none/block

Według mnie, najprostszym sposobem będzie zmienienie struktury na jakąś sensowniejszą.. zamiast zastanawiać się jak zmusić samochód do jazdy bez kół, po prostu mu je załóż ;)

A jak ustawić te divy, tak żeby zachować strukturę 2 divy pod sobą i trzeci przylepiony na po prawej stronie na wysokości tych dwóch divów?? Walczyłem z tym trochę, ale bez absoluta nidyrydy, a jak sie tak zrobi to sypie sie przy RWD. Struktura wygląda tak:

<div id="container">
      <div id="1"></div>
      <div id="2"></div>
      <div id="3"></div>
</div>

Chodzi mniej wiecej o coś takiego, że div 1 i 2 mają np. 100x100, a trzeci 100x200 i ma być przylepiony na wysokości div1 z prawej.

[ DIV ONE ][ DIV ]
[ DIV TWO][ THREE ]

Tak: http://jsbin.com/kupoyefele/1/