Invertire div in tablet e mobile

[danielebarisano]

Salve ,su questo sito: https://www.zanzatap.com/ vorrei invertire i primi 2 div (testo Zanzariere e Tapparelle - slideshow) su tablet e mobile.

Da CSS ho usato questo codice ma non funziona:

@media screen and (max-width: 768px) {
 .texthome{
		display:flex;
		flex-flow:column;
 }
	
 .slide{
		order:1;
 }
}

Chi può darmi una mano?

[KillerWorm]

Ciao, la proprietà order funziona solo per gli elementi che stanno nello stesso livello, cioè elementi fratelli dentro lo stesso contenitore. Inoltre flex andrebbe applicato proprio all'elemento contenitore (padre), cioè quello che ha come figli diretti gli elementi per i quali vuoi modificare l'ordine. Nel tuo caso non è così, quindi anche applicando quella regola non ottieni nessun effetto visibile perché i due elementi (testo e slide) stanno dentro contenitori e livelli diversi e l'elemento .texthome non è l'elemento padre.

Gli elementi che puoi considerare sono questi:

<div class="vc_row wpb_row vc_row-fluid vc_custom_1577963936129">
  <div class="wpb_column vc_column_container vc_col-sm-4">[dove è il testo]</div> 
  <div class="wpb_column vc_column_container vc_col-sm-8">[dove è lo slide]</div>
</div>

Puoi risolvere anche senza l'uso di order specificando invece flex-flow:column-reverse; giusto per l'elemento padre, in questo modo:

@media screen and (max-width: 768px) {
   .vc_custom_1577963936129{
      display: flex;
      flex-flow: column-reverse;
   }
}

Consiglio comunque di applicare un id o una specifica classe per poter selezionare in modo più accurato quell'elemento; quella attuale (vc_custom_1577963936129) è una classe piuttosto generica che suppongo sia stata applicata in automatico dalla piattaforma che utilizzi, quindi potrebbe anche variare e comunque rende difficile la manutenzione del CSS; se puoi applicare un id per quell'elemento sarebbe meglio.