Déplacer des éléments en responsive sans Javascript

**Cisman** · 08/05/2022, 17h17

Bonjour, j'essaie de faire un exercice que mon fils à eu à l'école et j'ai une question. Comment déplacer un élément comme le Titre, du body au header en responsive? Ici, le Titre est en dessous du header sur écran normal et passe dans le header sur tablette. Tout cela, juste avec les media query et sans Javascript. Pour moi, c'est faisable avec du Javascript, en manipulant le DOM. Mais sans Javascript, je ne vois pas comment. Nom : CleanShot 2022-05-08 at 17.13.39.png
Affichages : 128
Taille : 28,2 Ko

Nom : CleanShot 2022-05-08 at 17.13.39.png
Affichages : 128
Taille : 28,2 Ko

Nom : CleanShot 2022-05-08 at 17.13.53.png
Affichages : 133
Taille : 26,6 Ko

**mathieu** · 08/05/2022, 23h54

qu'est ce que vous voulez dire par "en responsive" ? vous voulez que les éléments s'affichent différemment en fonction de la largeur de l'affichage ?

**Cisman** · 09/05/2022, 08h42

Oui, c'est ça.

**mathieu** · 09/05/2022, 09h25

en théorie, il est toujours possible de faire n'importe quelle modification en css avec une méthode très brutale : une 1re balise avec tout le contenu qui doit s'afficher pour un affichage large et une 2e balise avec tout le contenu pour l'affichage plus étroit. et ensuite éventuellement d'autres balises qui contiennent les balises pour chaque largeur d'affichage.
c'est, bien sûr, une méthode à déconseiller puisque cela ralenti le temps de calcul de la page, son envoi et son affichage et donc c'est un gâchis de ressources.

depuis plusieurs années, les navigateurs supportent les disposition "flex" et "grid" qui permettent beaucoup de choses comme par exemple changer l'ordre d'affichage des éléments par rapport à ce qui est dans le code html.
cela permet de vous approchez de ce que vous chercher à faire, regardez par exemple là :
https://developer.mozilla.org/fr/doc...9t%C3%A9_order

**Cisman** · 09/05/2022, 10h12

Merci pour les informations.

**NoSmoking** · 09/05/2022, 10h40

Bonjour,

Comment déplacer un élément comme le Titre, du body au header en responsive?

il existe une méthode qui fonctionne bien et qui consiste à mettre le même élément à plusieurs endroit, conteneur parent différent, et de masquer/afficher suivant le cas. Pas très « propre » mais efficace.

Concernant la position dans un même conteneur parent, effectivement l'utilisation du mode de rendu « boîtes flexibles » apporte une réelle solution avec la propriété order.

Dans ton cas tu peux également avoir recours au modèle de « disposition en grille » qui collerait bien à ce que tu cherches à faire. La structure HTML sera différente de celle en « flex » mais tu peux obtenir les mêmes résultats.

Je te mets deux exemples simples de ce que cela pourrait donner.

Exemple modèle Boîtes flexibles

Code html :

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
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Boîtes flexibles</title>
<meta name="Author" content="NoSmoking">
<meta name="DVP-discussion" content="d2131881">
<meta name="description" content="[CSS] replacement éléments version FLEX">
<style>
html, body {margin: 0;padding: 0;font: 1em/1.5 Verdana,sans-serif;}
h1, h2, h3 {margin: .25em 0;color: #069;}
body {
  padding: .5em;
  box-sizing: border-box;
}
header {
  display: flex;
  justify-content: space-between;
}
.liens {
  display: flex;
  width: 14em;
  height: 5em;
  border: 1px solid #690;
  background-color: #EFD;
}
.search {
  width: 10em;
  border: 1px solid #996;
  background-color: #FFD;
}
.logo {
  width: 10em;
  border: 1px solid #960;
  background-color: #FD8;
}
.slogan {
  width: 80%;
  height: 10em;
  margin: 1em auto;
  border: 1px solid #069;
  background-color: #DEF;
}
.description {
  width: 80%;
  height: 20em;
  margin: 1em auto;
  border: 1px solid #909;
  background-color: #FDF;
}
.titre {
  flex: 1 0 auto;
  text-align: center;
}
header .titre {
  display: none;
}
/*=- adaptation taille écran -=*/
@media only screen and (max-width:768px) {
  header .titre {
    display: block;
    order: 1;
  }
  .main h1 {
    display: none;
  }
  .liens {
    order: 10;
  }
  .logo {
    order: -1;
  }
  .search {
    display: none;
  }
}
</style>
</head>
<body>
  <header>
    <nav class="liens">Liens</nav>
    <h1 class="titre">Titre</h1>
    <div class="logo">Logo</div>
    <div class="search">Search bar</div>
  </header>
  <main class="main">
    <h1 class="titre">Titre</h1>
    <div class="slogan">Slogan</div>
    <div class="description">Description</div>
  </main>
</body>
</html>

Exemple disposition en grille :

Code html :

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
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Disposition en grille</title>
<meta name="Author" content="NoSmoking">
<meta name="DVP-discussion" content="d2131881">
<meta name="description" content="[CSS] replacement éléments version GRID">
<style>
html, body {margin: 0;padding: 0;font: 1em/1.5 Verdana,sans-serif;}
h1, h2, h3 {margin: .25em 0;color: #069;}
 
.main-grid {
  display: grid;
  box-sizing: border-box;
  height: 100vh;
  margin: auto;
  padding: .5em;
  background-color: #FFF;
  grid-template-rows: auto auto auto 1fr;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "liens logo search"
                       "titre titre titre"
                       "slogan slogan slogan"
                       "description description description";
}
.liens {
  width: 14em;
  height: 5em;
  border: 1px solid #690;
  background-color: #EFD;
  grid-area: liens;
}
.search {
  width: 10em;
  margin-left: auto;
  border: 1px solid #996;
  background-color: #FFD;
  grid-area: search;
}
.logo {
  width: 10em;
  margin: 0 auto;
  border: 1px solid #960;
  background-color: #FD8;
  grid-area: logo;
}
.slogan {
  width: 80%;
  height: 10em;
  margin: .5em auto;
  border: 1px solid #069;
  background-color: #DEF;
  grid-area: slogan;
}
.description {
  width: 80%;
  height: 20em;
  margin: .5em auto;
  border: 1px solid #909;
  background-color: #FDF;
  grid-area: description;
}
.titre {
  text-align: center;
  grid-area: titre;
}
 
/*=- adaptation taille écran -=*/
@media only screen and (max-width:768px){
  .main-grid {
    grid-template-rows: auto auto 1fr;
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "logo titre liens"
                         "slogan slogan slogan"
                         "description description description";
  }
  .search {
    display: none;
  }
}
</style>
</head>
<body class="main-grid">
  <nav class="liens">Liens</nav>
  <h1 class="titre">Titre</h1>
  <div class="logo">Logo</div>
  <div class="search">Search bar</div>
  <div class="slogan">Slogan</div>
  <div class="description">Description</div>
</body>
</html>