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 :
****link rimosso****

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

Ho rimosso il link decisamente strano... puoi darci un chiarimento...?
Grazie

Già che ci sei chiarisci anche come mai esiste un account DOMENICO_FALCO e un Domenico_Falco1

Adesso ho letto le vostre risposte, non ricordo che link era strano e forse pensando di aver sbagliato l'iscrizione mi sarò iscritto di nuovo, ma davvero parliamo di un secolo fa, bastava cancellare il primo account, senza partire in quarta. Se proprio non vi sono simpatico, potete cancellare anche questo. saluti.

Sulla simpatia non mi esprimo nonnho elementi, ma di certo se pensi che il Forum sia a TUA disposizione per gedtire N Account stai sbagliando, dovresti avere più rispetto per il forum.
Non serve cancellarti...

Originariamente inviato da Domenico_Falco1

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

Sei tu che hai suddiviso i riquadri esplicitamente in due righe (container-schede) mettendo in ciascuno tre elementi (schedaN): in questo modo, diventa praticamente impossibile disporli in modo diverso senza impazzire.

Anche la struttura HTML deve essere progettata per consentire al CSS di adattarla a diversi dispositivi.

Quello che dovresti fare è creare un unico contenitore per le tue schede e inserirle tutte al suo interno: giocando sulla diversa dimensione delle singole schede, che andrai a differenziare usando le "media query" appunto, dovrai fare in modo che sullo schermo più ampio ve ne stiano tre, mentre su quello più piccolo solo due.

Questo risultato dovrà ovviamente basarsi sul fatto che, tarando la dimensione delle schede in modo diverso per i due layout, andranno a capo in modo diverso (ogni 3 schede nel layout con schermo più ampio, ogni 2 con schermo più ristretto).

L'alternativa per soffrire meno è quella di adottare un framework CSS che abbia queste feature, come Bootstrap ad esempio.

Ciao!

Grazie dell'aiuto ed ottima giornata.