28112 sujets

CSS et mise en forme, CSS3

bonjour

j'imagine que la solution n'est pas extraordinaire et pourtant je ne la vois pas

dans une structure Boostrap j'ai un menu a gauche qui occupe 4 colonnes et une partie principale à doite qui occupe 8 colonne ……

je voudrais que sur les petits écrans (col-xs), le menu et la partie principale s'étale sur toute la largeur (12 colonnes), mais surtout je souhaite inverser l'ordre; c'est a dire que mon contenu principale s'affiche en 1er et ensuite, dessous, mon menu

j'ai donc tenter la chose suivante :
   
<div class="col-lg-4 col-xs-12 col-xs-push-4 col-lg-push-0">
     <h2>partie gauche</h2>
</div>
   
    <div class="col-lg-8 col-xs-12 col-xs-pull-12 col-lg-pull-0  ">
 <h2>partie droite</h2><!-- / col-lg-12 actu_sam_principale--><!-- / col-lg-6 actu_sam_seconde-->
      
     
               
    </div>	
le message est partie tout seul ……… désolé

je termine ……


<div class="col-lg-4 col-xs-12 col-xs-push-12 col-lg-push-0">
     <h2>partie gauche</h2>
</div>
   
    <div class="col-lg-8 col-xs-12 col-xs-pull-12 col-lg-pull-0  ">
       <h2>partie droite</h2>
     </div>	


ca ne fonctionne vraiment pas ………
qu'est ce que je loupe ? dans cette histoire ?

j'avais bien tenté un "col-xs-push-4" et un "col-xs-pull-4" mais ca ne m'inverse pas mes deux parties ?

je bloque

si vous avez une idée a me soumettre ?

merci
Administrateur
jacques a écrit :
je termine ……
il y a un bouton "éditer" aussi pour modifier ses messages Smiley cligne
Modérateur
jacques a écrit :
ca ne m'inverse pas mes deux parties

Ça me fait penser à une des citations en bas de page du site...
Smiley lolol


peux pas t'aider, j'y connais rien à Bootstrap. Bonne journée.
Hello, avec Bootstrap je pense que ut ne pourras pas : les éléments sur 12 colonnes ne peuvent pas être flottants (pull-right et pull-left sont fait pour pousser à droite ou à gauche, comme son nom l'indique) or ce n'est pas du tout ce que tu cherches à faire…

Sans ajouter de CSS tu peux en revanche facilement le faire en inversant les deux parties dans ton HTML. Tu auras le bon ordre sur petit écran. Il te suffira ensuite de jouer avec les pull-left/right en lg pour les remettra à droite ou gauche sur les écrans plus grands.

Qu'en dis-tu ?