web-dev-qa-db-fra.com

Bootstrap change l'ordre des div en tirant à droite, tirant à gauche sur 3 colonnes

J’y ai travaillé toute la journée, mais je n’ai pas trouvé de solution. J'ai 3 colonnes dans une rangée dans un conteneur.

1: bon contenu - tirez à droite

2: navigation - tirez à gauche

3: contenu principal

A quoi ça ressemble sur les grands écrans:

------------------------------------------------
|   Menu  |      Content      |  Right Content |
------------------------------------------------

À quoi cela devrait ressembler sur des écrans plus petits:

----------------------------
|  Menu  |  Right Content  |
|        |------------------
|        |  Content        |
----------------------------

A quoi ça ressemble maintenant:

------------------
| Right Content  |
------------------
| Menu | Content |
------------------

Je pense que c’est juste un simple problème flottant. Mais j'ai essayé presque toutes les possibilités.

csstwitter-bootstrapcss-floattwitter-bootstrap-3
57
user2982964

Bootstrap 3

Utilisation du système de grille de Bootstrap 3:

<div class="container">
  <div class="row">
    <div class="col-xs-4">Menu</div>
    <div class="col-xs-8">
      <div class="row">
        <div class="col-md-4 col-md-Push-8">Right Content</div>
        <div class="col-md-8 col-md-pull-4">Content</div>
      </div>
    </div>
  </div>
</div>

Exemple de travail: http://bootply.com/93614

Explication

Premièrement, nous définissons deux colonnes qui resteront en place quelle que soit la résolution de l'écran (col-xs-*).

Ensuite, nous divisons la colonne de droite, la plus grande, en deux colonnes qui s’effondrent les unes sur les autres sur des tablettes de la taille d’une tablette et inférieures (col-md-*).

Enfin, nous décalons l'ordre d'affichage en utilisant la classe correspondante (col-md-[Push|pull]-*). Vous poussez la première colonne par le montant de la seconde et tirez la seconde par le montant de la première.

98
Sean Ryan

Essaye ça...

<div class="row">
    <div class="col-xs-3">
        Menu
    </div>
    <div class="col-xs-9">
        <div class="row">
          <div class="col-sm-4 col-sm-Push-8">
          Right content
          </div>
          <div class="col-sm-8 col-sm-pull-4">
          Content
          </div>
       </div>
    </div>
</div>

Bootply

5
Zim