Salve, premetto che sto imparando Foundation e le tecniche responsive in genere. I primi risultati sono incoraggianti, ma ora ho incontrato una difficoltà con le grid che non so se dipenda dal framework o, più probabilmente, da mia ignoranza.

Semplificando al massimo, ho un griglia di una sola riga con 2 DIV che per risoluzioni maggiori di 40em dovrebbe essere:
codice:
    <div class="row">
           <div class="medium-10 columns">                    
            <p>Elastic Box medium-10</p>
           </div>        
           <div class="medium-2 columns">                            
            <p>Hidden Box medium-2</p>
           </div>
     </div>
In funzione della larghezza display vorrei far 'sparire' la 2° DIV per display sotto i 40em.
La domanda é: se uso la classe "hide-for-small" sulla 2° div, la 1° dovrebbe diventare una "medium-12"; corretto ? e se si come ?

Ho provato con questa soluzione, che non funziona, forse perchè non ha senso o forse perchè è errata la sintassi:
Nel foglio CSS definisco:
codice:
    areaTitoli {
    medium-12    
    }
@media only screen and (min-width: 40.063em) {
    areaTitoli {
    medium-10    
    }
}
E il codice di esempio diventa:
codice:
    <div class="row">
           <div class="areaTitoli columns">                    
            <p>Elastic Box medium-10</p>
           </div>        
           <div class="hide-for-small medium-2 columns">                            
            <p>Hidden Box medium-2</p>
           </div>
     </div>
Non so se è lecito ridefinire una classe con riferimento ad una altra classe (o se la sintassi è errata), comunque, dalle prove con larghezza browser > 40em la 1° div rimane sempre a tutta larghezza e la 2° finisce sotto

Grazie per qualsiasi indicazione