Media Queries per sovrapporre una sopra l'altra 4 colonne di un footer quando schermo

[podset]

Il titolo intero che la limitazione del forum non mi ha fatto scrivere è questa: "Media Queries per sovrapporre una sopra l'altra 4 colonne di un footer quando lo schermo si restringe sotto i 700px (per intenderci su per giù la dimensione degli smartphone)

Il mio problema è questo: in pratica devo fare in modo che il footer situato qui sovrapponga una sopra l'altra le 4 colonne di cui è provvisto nel momento che la risoluzione dello schermo si restringe a dimensioni più piccole, tipo quelle degli smartphone ed altri.

In questo momento, quando restringo lo schermo per fare la prova responsive di visualizzazione del footer, le 4 colonne restano allineate una accanto all'altra e quindi il contenuto delle stesse, ad un certo punto, via via che lo schermo diventa più piccolo, taglia le parole a metà. Quindi alcune di esse non appaiono per intero rimanendo illeggibili.

Qualcuno sa quali righe di codice bisogna inserire per ottenere la sovrapposizione una sopra all'altra delle quattro colonne del footer?

[podset]

Qui inserisco il codice html e css del footer.

Codice html:

<div class="footer">
<div class="column">
<h2>Quis sum?</h2>
<p>Nome autore (textus writer). Continue hic quis es <span style="color: #ffffff;"><a style="color: #ffffff;" href="#">Quis sum</a></span></p>
</div>
<div class="column">
<h2>Et Auxilium Support</h2>
<p><span style="color: #ffffff;"><a style="color: #ffffff;" href="#">Contact</a></span></p>
<p><span style="color: #ffffff;"><a style="color: #ffffff;" href="#">Missionis</a></span></p>
</div>
<div class="column">
<h2>Resources</h2>
<p><span style="color: #ffffff;"><a style="color: #ffffff;" href="#">membership Service</a></span></p>
<p><span style="color: #ffffff;"><a style="color: #ffffff;" href="#">Officia et facultates</a></span></p>
<p><span style="color: #ffffff;"><a style="color: #ffffff;" href="#">Site Map</a></span></p>
</div>
<div class="column">
<h2>ut actio</h2>
<p><span style="color: #ffffff;"><a style="color: #ffffff;" href="#">PECUNIAM DO AD NEWSLETTER</a></span></p>
<form name="searchForm"><span style="color: #ffffff; font-family: Arial; font-size: medium;">Situs (intra unum verbum):</span> <input maxlength="100" name="input" size="20" type="text" /> <input type="button" value="Cerca" /><img src="http://podset.altervista.org/provagenerale/anteprima/images/icon-troll-toptemplate75.jpg" alt="" width="18" height="15" /></form></div>
<p style="text-align: center;">Copyright (c) nome sito nome azienda - All rights reserved - <span style="color: #ffffff;"><a style="color: #ffffff;" href="#">Privacy Policy</a> </span>- <span style="color: #ffffff;"><a style="color: #ffffff;" href="#">Crustulae Information</a></span> - <span style="color: #ffffff;"><a style="color: #ffffff;" href="#">Terms and Conditions </a></span>- <span style="color: #ffffff;"><a style="color: #ffffff;" href="#">Disclaimer</a></span></p>
</div>
</div>

Codice css:

<style>
/* Footer */
.footer {
padding: 20px;
text-align: left;
background: #666;
}

* {
box-sizing: border-box;
}

a:link, a:visited {text-decoration: none; color: #0000FF}
a:hover {text-decoration: underline; color: #FF4D00}

/* Create four equal columns that floats next to each other */
.column {
float: left;
width: 25%;
padding: 10px;
background: #666;
height: 450px; /* Should be removed. Only for demonstration */
}

/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
</style>
}

[podset]

C'è nessuno?...