1485 sujets

Web Mobile et responsive web design

2 div a cote, div droite au dessus si responsive ?

Bonjour,

J'ai une page web comme ca :
div 1 texte, div 2 image
div 1 image, div 2 texte
div 1 texte, div 2 image
div 1 image, div 2 texte

etc.
Ca rend joli en grand.
Mais sur un petit ecran, je voudrais que le texte soit toujours au dessus de l'image.
Donc dans le cas ou la div texte est en deuxieme position, elle viendra automatiquement en dessous de la div avec une image.

D'ou ma question : comment faire en sorte qu'en passant sur un petit ecran, la deuxieme div apparaisse avant la premiere ?
grand ecran : div 1 div 2
petit ecran :
div 2
div 1

Merci =)
Salut, c'est assez simple en fait, il suffit de positionner d'abord la div 2 (dans le code html) et de modifier son comportement en la faisant flotter à droite (grand écran) et de simplement rétablir son affichage normal dans le flux lorsque que tu redimensionnes (petit écran):
<style>
        .une, .deux{width:200px}

        .deux{float:right}

        .clear{clear:both}

        @media handheld, only screen and (max-width:600px) /* dimension au hasard pour l'exemple */ {
                .deux{float:none}
            }
</style>

<body>
        <div class="deux"><img src="http://lorempixel.com/200/100/" alt="description image"/></div>
        <div class="une"><p>texte à afficher</p></div>

        <div class="clear"></div>
        <hr />

        <div class="deux"><p>texte à afficher</p></div>
        <div class="une"><img src="http://lorempixel.com/200/100/" alt="description image"/></div>

        <div class="clear"></div>

        <hr />
        <p>Suite du contenu...</p>
</body>

Modifié par LuciferX (17 Dec 2013 - 21:57)
Sujet clos
Aller à