Réorganiser 3 colonnes dans Bootstrap pour le référencement

Question

J'ai besoin d'aide pour réorganiser les colonnes dans Bootstrap à des fins de référencement en utilisant la fonction "push and pull". Le résultat final ressemblerait à l'image ci-dessous. Pour l'instant, je n'ai besoin que de changer la barre latérale gauche et le contenu principal sur l'écran de bureau. J'ai réussi à le faire en utilisant un tas de divs et de floats, mais j'ai décidé d'essayer Bootstrap. Merci de votre compréhension.

HTML

<div class="container">
  <div class="row">
    <div class="col-sm-4 col-1 my-col">
        Main Content (Middle)
    </div>
    <div class="col-sm-4 col-2 my-col">
        Left Sidebar
    </div>
    <div class="col-sm-4 col-3 my-col">
        Right Sidebar
    </div>
  </div>
</div>

CSS

.my-col{
line-height: 40px;
color:white;
text-align:center;
font-size: 20px;
}

.col-1{background:red}
.col-2{background:blue}
.col-3{background:green}

@media (min-width: 768px) {
.my-col{
    line-height: 80px;
}
}

Bootply http://www.bootply.com/slW117V1oH#

Answer 1

L'ordonnancement des colonnes est la fonction inbulit du cadre bootstrap. Pour plus d'informations, visitez le site aquí

 <div class="row">
      <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
      <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
    </div>

exemple ici codepen Bon appétit :)