Layout a due colonne responsive

Osservando questo esempio nel browser selezionando qui. Provate poi ad alterare la larghezza della finestra, stringendola ed estendendola. Vedrete le colonne spostarsi all'interno della finestra del browser secondo la larghezza della finestra.

<h1 align='center'>Layout a due colonne</h1>


<div class="column">
<h3> LyX </h3>
<p align='justify'> LyX è un word processor multi-piattaforma open source che potete usare con linux,
Windows o col Mac. </p>
</div>

<div class="column">
<h3> Immagina </h3>
<p align='justify'> Immaginate poter scrivere un documento come un libro o una lunga tesi divisa in
capitoli, sezioni e sottosezioni. Poi si dice al programma di creare l'indice e lui lo crea. </p>
</div>

body {
 width: 97%;
 font-family: Arial, Verdana, sans-serif;
 color: #000000;
 margin: auto;}


p {
 margin: 3%;}

h1, h2, h3 {
 text-align: center}

/* Create four equal columns that floats next to each other */
.column {
 float: left;
 width: 50%;
}

/* Clear floats */
.row:after {
 content: "";
 display: table;
 clear: both;
}

/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 900px) {
 .column {
 width: 50%;
 }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
 .column {
 width: 100%;
 }
}