Salve, sto cercando di realizzare un layout su due colonne (in realtà si tratta del tag <article></article> organizzato su due colonne a sinistra di un <aside></aside> contenente dei blocchi div di altezze differenti.
Allo stato attuale la struttura è su due section con float: left e width: 50%
codice:
<article>
<section><div id="1"></div><div id="3"></div></section>
<section><div id="2"></div id="4"><div></div></section>
</article>
In questo modo i div si visualizzano affiancati e secondo un certo senso di lettura sinistra-destra e alto-basso, secondo l'ordine numerico che ho indicato con gli id... Nel momento in cui passo a una visualizzazione tipo smartphone, i due <section></section> vanno uno sotto l'altro con tutti i loro contenuti, e quindi si perde l'ordine numerico.
Se associo una <section></section> a ogni div risolvo il problema dell'incolonnamento (e dell'ordine naturale di lettura) su smartphone, ma il div con id="3", finisce sotto id="1" ma allineato in orizzontale con id=2 che ha un'altezza maggiore di id=1, con conseguente spazio vuoto, mentre vorrei collocarlo (in automatico, dato che questi div hanno contenuti che variano coi vari aggiornamenti) nel primo spazio libero che trova sotto una delle due colonne, come avviene per esempio nel layout di Google+ cui la mia idea si vorrebbe ispirare.

Questo è il CSS della <section></section>
codice:
section {
    padding: 0px 2px 0px 2px; 
    float: left; 
    width: 50%; 
    text-align: center; 
    background-color: inherit;
}