Griglia responsive

[Valeria75_bis]

Ciao a tutti, ho una griglia HTML composta da orari di alcune tratte
10 Colonne (per 9 differenti orari + prima colonna descrizione)
2 righe (prima partenza, seconda arrivo)


Ora... vorrei, sul mobile, cambiare la posizione degli elementi, visto che 10 colonne non sono visibili.

Come?

mostrando

descrizione - partenza - arrivo
... per le 9 righe

è possibile?


io usavo questo script

@media screen and (max-width: 600px) {table {width:100%;}
thead {display: none;}
tr:nth-of-type(2n) {background-color: inherit;}
tr td:first-child {background: #f0f0f0; font-weight:bold;font-size:1.3em;}
tbody td {display: block;  text-align:center;}
tbody td:before { 
    content: attr(data-th); 
    display: block;
    text-align:center;  
  } 
}

ma ovviamente non funziona!

Grazie

[Valeria75_bis]

Prima di tutto grazie per la risposta!! Quello che non riesco a fare a gestire gli elementi da posizionare in ogni griglia.
Mi potresti dare una mano partendo dalla mia tabella di esempio?

Grazie!