Cambiare la disposizione dei div in base alle media query

Buon giorno a Tutti

Come si capirà sono alle prime armi con html e le media query.

Sto comunque tentando di creare un sito che potrete visitare a questa pagina :

Trinity Coret

Come potrete vedere sotto la messaggio di benvenuto ho 6 div con relative immagini e li ho posizionati così :

  	<div class="container-schede"> 
		<div class="scheda1"; ><img src="PRESENTAZIONE.gif" alt="CSS" class="elastic";/></div>
		<div class="scheda2"; ><img src="TERRITORI.gif" alt="CSS" class="elastic";/></div>
		<div class="scheda3"; ><img src="PRODOTTI.gif" alt="CSS" class="elastic";/></div>
	</div>
	<div class="container-schede"> 
		<div class="scheda4";><img src="FINANZA.gif" alt="CSS" class="elastic"; /></div>
		<div class="scheda5";><img src="TURISMO.gif" alt="CSS" class="elastic"; /></div>
		<div class="scheda6";><img src="NORMATIVE.gif" alt="CSS" class="elastic";/></div>
	</div>

Ponendo la larghezza nel css a 33% dei rispettivi div.

Adesso sto provando di adattarlo al display di un mobile e come prima step usando la media query :

@media (min-width: 320px) and (max-width: 480px)

e vorrei che si posizionassero i suddetti riquadri due alla volta e non tre come sul desktop.

Forse dovrei usare il display none per nascondere quello su desktop, ma come faccio a impostare dei div diversi nel css ?

Chiaramente per chi vorrà gentilmente aiutarmi, potrà vedere sia l'index che il css dal visualizza sorgente pagina del sito.

E visto che mi trovo, devo usare un file.js per ottimizzare le media query ?

Grazie ed ottima giornata.

Domenico