Ciao, non metto in dubbio il discorso di Max 1 sulla complessità della questione e sul fatto che una guida possa sicuramente aiutarti a capire cosa ci sta dietro il funzionamento di un sito responsive e come potersi muovere per applicare le proprie personalizzazioni.
A mio parere però i problemi qui sono diversi. Ho dato uno sguardo al sito, che chiaramente è responsive, e posso dirti che la questione può essere risolta definendo opportunamente il
float dei due elementi per i rispettivi blocchi (come in parte è già fatto).
Però...
Ho visto che la struttura delle classi che stai usando è organizzata in modo macchinoso che porta a sviluppare codice css parecchio ridondante, quindi poco pratico da gestire, e che produce dei riferimenti ambigui.
Mi spiego: per distinguere i blocchi in modo alternato, stai usando una cosa del tipo
Codice:
"nome-classe"
"nomeclasse"
"nome-classe"
"nomeclasse"
...
mettendo quindi un trattino tra le parole per i blocchi dispari e viceversa, omettendo il trattino, per quelli pari; stessa cosa all'interno di ciascun blocco principale, continui ad usare questa "tecnica" per definire i due elementi (testo e immagine):
Codice:
"nome-classe"
- "elemento-immagine"
- "elemento-testo"
"nomeclasse"
- "elementoimmagine"
- "elementotesto"
...
Sia chiaro che trovo abbastanza inopportuno utilizzare un tale sistema, per almeno due motivi: primo, vai a sviluppare un codice css in maniera parecchio ridondante perché lo stesso css che usi per le classi col trattino, lo devi riportare poi anche per quelle senza trattino, variando giusto una o comunque poche regole (questo non giustifica il fatto di usare due classi distinte come hai fatto tu); secondo, usare lo stesso nome, con o senza trattino, porta sicuramente a situazioni di ambiguità sia nella stesura/personalizzazione del css, sia nel caso si utilizzino queste classi per riferirsi a tali elementi per lo sviluppo (eventuale) di codice JavaScript.
Questo sistema mi pare quindi contrastare tutte quelle "best practices" per una buona programmazione.
Ora ti chiedo (per mia curiosità): è una tecnica che hai "elaborato" tu o è qualcosa che hai trovato già così, o hai visto fatto da altre parti?
Per poterti fornire una soluzione valida ti consiglierei intanto di "correggere" questo punto.
Ridefinisci quindi tutti i nomi di classe scrivendoli col trattino (o senza, se preferisci).
A quel punto, per identificare i blocchi dispari da quelli pari, puoi fare due cose: o utilizzi un'ulteriore classe per identificare i due blocchi "dispari" e "pari" (da inserire quindi assieme a quella/e esistente/i nell'attributo class) e definire esclusivamente le regole css che ti servono per impaginare i due tipi di blocchi; oppure sfruttare degli opportuni selettori css come
nth-of-type() con cui puoi adoperare i valori "odd" e "even" proprio per selezionare gli elementi dispari e pari.
Questo è un punto di partenza ed è, a mio parere, necessario per risolvere al meglio il tuo problema. Poi chiaramente tutto si può fare in tanti altri modi.
Ho notato inoltre che i due contenuti (testo e immagine) vai a disporli fisicamente (cioè nel codice HTML) in ordine, appunto, alternato. Anche questo punto sarebbe da rivedere, perché l'impaginazione la gestirai esclusivamente da css.
Ti consiglio quindi di disporre tutti i contenuti con uno stesso ordine per tutti i blocchi. Metti ad esempio l'elemento di testo e poi l'immagine, così per tutti i blocchi. A quel punto vai ad impostare opportunamente il float dal css.
Eventualmente potrei darti un aiuto se incontri difficoltà nell'applicare il css in maniera corretta, ma dovresti comunque riorganizzare le classi come ti ho indicato.
Ovvio, prendili come consigli, poi vedi tu cos'è meglio fare.
Fammi sapere.
