[Résolu] Placer le tiers central en premier

Bonjour,

Je me suis lancée dans la réalisation d'un site en W3.CSS Responsive et je me suis retrouvée face à un petit problème.. Peut-être que quelqu'un a une solution a me donner!?

Ma page est divisée en 3 parties :

<div class="w3-row">
	<div class="w3-third w3-container w3-green">Partie A</div>
	<div class="w3-third w3-container w3-blue"><h2>Partie B</h2></div>
	<div class="w3-third w3-container w3-green">Partie C</div>
</div>

Ce que je cherche a faire depuis un bon moment est lorsque le visiteur visite le site depuis son téléphone, j'aimerais que la partie central (Partie B en bleu) soit la première affichée en haut de son écran, et ensuite la partie A et C.

Ceci-dit, lorsque un visiteur utilise un grand écran, comme un PC ou une tablette, il est important que les visiteurs voient les 3 "container" les uns à côté des autres, dont la partie 2 est au milieu.

Existe-t-il une class qui va définir la "div" prioritaire pour les petits écrans? Ou dois-je complètement oublier cette idée?
Modifié par RinaBK (06 Sep 2019 - 07:54)

Bonjour,

tu peux obtenir cela avec flexbox :
https://developer.mozilla.org/fr/docs/Web/CSS/order

et les media queries bien entendu

Bonjour,

idem avec Grid Layout où l'on peut placer les grid items où on le souhaite si on ne veut pas laisser le navigateur gérer cela automatiquement.

Ok merci beaucoup! Je vais aller lire et tester tout ça

Je reviens vers vous pour encore vous remercier! Je me suis rendue compte que les class W3.CSS Responsive sont super quand on débute.. Mais pour une personne comme moi qui est capable de réaliser tout moi-même, le mieux est de ne pas utiliser les class W3.CSS Responsive et de créer moi-même les class et tout et tout! Voilà, grâce à vous j'ai pu obtenir ce que je voulais et bien plus encore!! Merci encore de m'avoir bien aiguillée
Modifié par RinaBK (07 Sep 2019 - 10:16)