Comment changer l'ordre de 3 colonnes bootstrap à petite taille d'écran en utilisant push et pull?

Question

J'ai 3 colonnes à l'aide bootstrap

<div class="row"> 
    <div class="col-md-3">1</div> 
    <div class="col-md-5">2</div> 
    <div class="col-md-4">3</div> 
</div> 

ils ressemblent à ceci au milieu à grande taille:

Je veux qu'ils apparaissent comme ceci à petit et x-petite taille:

J'ai essayé avec traction et de poussée

<div class="row"> 
    <div class="col-md-3">1</div> 
    <div class="col-md-5 col-sm-push-4">2</div> 
    <div class="col-md-4 col-sm-pull-5">3</div> 
</div> 

mais le résultat à petit est: et l'ordre est changé à moyennes et grandes tailles pas petite

mon code: https://www.w3schools.com/code/tryit.asp?filename=FFMTM73UDAWR

Answer 1

Dans ce cas, commençons par mobile

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="row"> 
 
    <div class="col-sm-12 col-md-4" style="border:solid 1 px black;">1</div> 
 
    <div class="col-sm-12 col-md-4 col-md-push-4" style="border:solid 1 px black;">3</div> 
 
    <div class="col-sm-12 col-md-4 col-md-pull-4" style="border:solid 1 px black;">2</div> 
 
</div>

Answer 2

<div class="row"> 
 
    <div class="col=md-4">1</div> 
 
    <div class="col=md-4">2</div> 
 
    <div class="col=md-4">3</div> 
 
</div>

supprimer simplement pousser et pul bootstrap devient le premier mobile, et s'il n'est pas spécifié - la grille prendra toutes les 12 colonnes donc en spécifiant col-md-4 pour chacun des div que vous dites d'utiliser col-sm-12 et col-xs-12 pour un écran plus petit.