[Résolu] Changer l'ordre de blocs sur une version mobile responsive

Bonjour,
J'aimerais savoir s'il existe un moyen adapté de réorganiser l'ordre de blocs en mobile dans un scénario RWD.
Je m'explique :
Imaginons un site dont la version bureau contient des éléments classiques : en-tête, nav, contenu 1, contenu 2, ...
Avec des media-queries, je réorganise mon site pour des petites largeurs, mais j'aimerais que le contenu 2, pourtant après dans ma source HTML et visuellement sur bureau, se retrouve plus haut dans mon empilement mobile.
Qu'en pensez-vous ?
Merci d'avance.

Bonjour,

il y aura une solution css dédiée à cela:

Le flexible box layout module, et notamment sa propriété flex-order:
http://www.w3.org/TR/css3-flexbox/#flex-order

D'autres specs css3 devront permettre à obtenir ce résultat:
Le css grid layout, qui permettra de créer une grille de présentation et d'y placer des éléments (donc de les réordonner par la même occasion)

Le module regions, qui permettra de faire passer un contenu d'une boîte à l'autre, comme ce qu'il se fait dans les logiciels de mise-en-page.

Voilà, mais tout ça ça fonctionne difficilement que sous certains navigateurs et en prefixé. C'est donc pas vraiment utilisable en production.
En attendant? Je ne vois que du js pour obtenir ce résultat, voir dans quelques cas simples, une bidouille css.

Hello.

Pas mieux que kustolovic, en css pur, à part quelques gruges à base de positionnement absolu, ou en jouant avec les flottants (inversion gauche-droite) il n'y a rien d'exploitable actuellement.

Merci pour vos réponses rapides.
C'est bien ce que j'avais en-tête, possible mais encore loin d'être totalement mûr.

Salut,

Effectivement, le module CSS 3 consacré au modèle de boîte flexible est trop changeant pour être sérieusement utilisé en production à l'heure actuelle. Cela dit, il y a une autre solution, également basée sur CSS (sur CSS 2.1, d'ailleurs) : utiliser certaines valeurs de la propriété display, notamment table-header-group et table-footer-group (solution utilisée sur le site d'Alsacréations.fr). Raphaël fournit même une démonstration.

J'avais jamais pensé à cette bidouille là, merci! Mais ça reste une bidouille limitée.

Bonjour,
une autre solution pour inverser l'ordre des blocs est d'utiliser la valeur rtf sur la propriété dir sur le bloc parent et réinitialiser par la valeur ltf à l'intérieur des blocs.

kustolovic a écrit :
J'avais jamais pensé à cette bidouille là, merci! Mais ça reste une bidouille limitée.

Limitée mais utilisable en production : par exemple sur le site de l'agence www.alsacreations.fr

Hermann a écrit :
Bonjour,
une autre solution pour inverser l'ordre des blocs est d'utiliser la valeur rtf sur la propriété dir sur le bloc parent et réinitialiser par la valeur ltf à l'intérieur des blocs.

Tu as fait des tests ? Dans mes tests, cela ne joue que sur l'affichage des contenus, pas des blocs.
Modifié par Raphael (08 Jun 2012 - 14:55)

Raphael a écrit :

Limitée mais utilisable en production : par exemple sur le site de l'agence www.alsacreations.fr

Tu as fait des tests ? Dans mes tests, cela ne joue que sur l'affichage des contenus, pas des blocs.

C'est une solution que j'avais employée exceptionnellement sur un projet mais j'ai oublié de préciser que ça ne s'applique qu'aux éléments ayant un display:table-cell et inline-block, il me semble que ça fonctionnait correctement. Après ça ne répond pas à ce critère WCAG: http://www.w3.org/TR/WCAG20-TECHS/C27.html et implique une vérification de l'ordre de tabulation.
Modifié par Hermann (08 Jun 2012 - 15:48)

Hermann a écrit :
Après ça ne répond pas à ce critère WCAG: http://www.w3.org/TR/WCAG20-TECHS/C27.html et implique une vérification de l'ordre de tabulation.

En ce qui concerne l'ordre de tabulation, il s'agit d'en vérifier la cohérence non pas sur l'ensemble de la page Web, mais sur un bloc de contenu déterminé (menu de navigation, contenu d'un article, pied de page, encart englobant des à-côtés, etc.). Et heureusement : sinon, le recours à float: right serait systématiquement condamné.

Victor BRITO a écrit :

En ce qui concerne l'ordre de tabulation, il s'agit d'en vérifier la cohérence non pas sur l'ensemble de la page Web, mais sur un bloc de contenu déterminé (menu de navigation, contenu d'un article, pied de page, encart englobant des à-côtés, etc.). Et heureusement : sinon, le recours à float: right serait systématiquement condamné.

Merci pour cette précision Victor, je ne me souvenais plus de cette subtilité.

Hermann a écrit :
mais j'ai oublié de préciser que ça ne s'applique qu'aux éléments ayant un display:table-cell

Ben oui mais en quoi est-ce un problème ?
C'est un peu comme le flexible box model qui ne s'applique qu'aux éléments en... display: flexbox

Victor BRITO a écrit :

En ce qui concerne l'ordre de tabulation, il s'agit d'en vérifier la cohérence non pas sur l'ensemble de la page Web, mais sur un bloc de contenu déterminé (menu de navigation, contenu d'un article, pied de page, encart englobant des à-côtés, etc.). Et heureusement : sinon, le recours à float: right serait systématiquement condamné.

Bonsoir, question peut-être naïve , mais si l'on cible via les media queries des mobiles , quels risques prend t'on avec l'ordre de tabulation ? (sur écran tactile).

gc-nomade a écrit :
Bonsoir, question peut-être naïve , mais si l'on cible via les media queries des mobiles , quels risques prend t'on avec l'ordre de tabulation ? (sur écran tactile).

Sur écran tactile, la question ne se pose pas (à moins que je n'aie raté un épisode).

okay, donc moi non plus ,
je peut me conforter dans l'idée que ce n'est pas une contre-indication dans ce cas et argumenter.
merci

Et si on duplique les blocs qui doivent être déplacés ?
Imaginons qu'on voudrait switcher l'ordre de 2 blocs (selon que l'on soit sur desktop ou mobile)
On duplique les 2 blocs, ça nous fait 4 blocs au total :

<div class="desktop">
contenu a
</div>
<div class="desktop">
contenu b
</div>

<div class="mobile">
contenu b
</div>
<div class="mobile">
contenu a
</div>

Ensuite, on affiche les blocs qu'on désire grâce au media queries:

<style>
//MOBILE
.desktop{display:none;}

//DESKTOP
@media screen and (max-width:1025px) {
.desktop{display:block;}
.mobile{display:none;}
}
</style>

thithi242 a écrit :
Et si on duplique les blocs qui doivent être déplacés ?
Imaginons qu'on voudrait switcher l'ordre de 2 blocs (selon que l'on soit sur desktop ou mobile)
On duplique les 2 blocs, ça nous fait 4 blocs au total :

<div class="desktop">
contenu a
</div>
<div class="desktop">
contenu b
</div>

<div class="mobile">
contenu b
</div>
<div class="mobile">
contenu a
</div>

Ensuite, on affiche les blocs qu'on désire grâce au media queries:

<style>
//MOBILE
.desktop{display:none;}

//DESKTOP
@media screen and (max-width:1025px) {
.desktop{display:block;}
.mobile{display:none;}
}
</style>

Ton idée me paraît correcte et semble logique. Celà fait 'juste' répéter au moins 1 contenu.