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

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?

Qui inserisco il codice html e css del footer.

Codice html:

Citazione:

---

<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:

Citazione:

---

<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>
}

---

C'è nessuno?...