Discussion :

[redwire]

Bonjour,

J'ai une page web avec 3 div en ligne pour une résolution écran de PC et je souhaite modifier pour les affichages smartphone.
J'ai utilisé les media queries, pas de soucis jusque là.
Je souhaite simplement changer l'ordre d'affichage, celui qui est le plus à droite (le dernier de ma requete php) doit être le premier à s'afficher (voir image jointe)

On peut faire en CSS? ou il faut que je cherche à adapter ma requete selon l'écran (c'est faisable?)

Merci par avance

[NoSmoking]

Bonjour,
c'est pile poil le service que peux te rendre les flex-box et les media-queries.
Sur base de la structure suivante

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<div id="conteneur">
  <div>item #1</div>
  <div>item #2</div>
  <div>item #3</div>
</div>

en appliquant le CSS minimum suivant

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
#conteneur {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
#conteneur > div {
  flex: 1;
  margin: 1em;
  min-height: 5em;
  border: 1px solid #ABC;
}
 
@media(max-width: 640px) {
  #conteneur {
    flex-direction: column-reverse;
  }
}

tu devrais obtenir ton résultat, les valeurs sont bien sûr à ajuster.

[redwire]

Merci de la réponse, j'ai essayé... mais ça marche pôs ou il y a un truc qui m'échappe. Voici la page et le css

http://www.mathisweb.fr/2017/disco.php

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
div.disco{
 display: flex;
 flex-direction: row;
 justify-content: space-between;
 margin-top: 8%;
 margin-bottom: 8%;
 
}
 
div.discoDetail{	
 flex: 1; 
 text-align: center;
}
 
@media screen and (max-width: 640px) {
div.discoDetail{ 
 flex-direction: column-reverse;
}
}

[NoSmoking]

Ta régle

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
@media screen and (max-width: 640px) {
  div.discoDetail { /* ce n'est pas cet élément qui est concerné */
	  flex-direction: column-reverse;
  }
}

n'est pas bonne il faut modifier le style de l'élément div.disco

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
@media screen and (max-width: 640px) {
  div.disco{ 
	  flex-direction: column-reverse;
  }
}

[redwire]

ah ben, voilà, je savais bien qu'il y avait un truc qui m'échappait: ça marche
merci beaucoup!