Bootstrap 3: pull-right for col-lg only

Question

Nouveau sur bootstrap 3.... Dans ma mise en page j'ai :

    éléments 1

            éléments 2

Je voudrais que les 'éléments 2' ne soient pas alignés à droite sur des écrans plus petits que col-lg. Donc effectivement avoir la classe pull-right seulement pour col-lg-6...

Comment pourrais-je y parvenir ?

Voici un exemple : http://jsfiddle.net/thibs/Y6WPz/

Merci

Answer 1

Vous pourriez mettre "élément 2" dans une colonne plus petite (c'est-à-dire col-2) et utiliser ensuite push uniquement sur des écrans plus grands :

    éléments 1

         éléments 2

Démonstration : http://bootply.com/88095

Une autre option est de remplacer le flottement de .pull-right en utilisant une requête @media...

@media (max-width: 1200px) {
    .row .col-lg-6 > .pull-right {
        float: none !important;
    }
}

Enfin, une autre option est de créer votre propre classe CSS .pull-right-lg...

@media (min-width: 1200px) {
    .pull-right-lg {
        float: right;
    }
}

MISE À JOUR

Bootstrap 4 inclut des flottements responsifs, donc dans ce cas, vous utiliserez simplement float-lg-right.
Aucun CSS supplémentaire n'est nécessaire.

Démonstration Bootstrap 4

Answer 2

Essayez ce extrait de LESS (Il est créé à partir des exemples ci-dessus et des mixins de requête media dans grid.less).

@media (min-width: @screen-sm-min) {
.pull-right-sm {
  float: right;
}
}
@media (min-width: @screen-md-min) {
.pull-right-md {
  float: right;
}
}
@media (min-width: @screen-lg-min) {
.pull-right-lg {
  float: right;
}
}

Answer 3

.pull-right-not-xs, .pull-right-not-sm, .pull-right-not-md, .pull-right-not-lg{
    float: right;
}

.pull-left-not-xs, .pull-left-not-sm, .pull-left-not-md, .pull-left-not-lg{
    float: left;
}
@media (max-width: 767px) {    
    .pull-right-not-xs, .pull-left-not-xs{
        float: none;
    }
    .pull-right-xs {
        float: right;
    }
    .pull-left-xs {
        float: left;
    }
}
@media (min-width: 768px) and (max-width: 991px) {
    .pull-right-not-sm, .pull-left-not-sm{
        float: none;
    }
    .pull-right-sm {
        float: right;
    }
    .pull-left-sm {
        float: left;
    }
}
@media (min-width: 992px) and (max-width: 1199px) {
    .pull-right-not-md, .pull-left-not-md{
        float: none;
    }
    .pull-right-md {
        float: right;
    }
    .pull-left-md {
        float: left;
    }
}
@media (min-width: 1200px) {
    .pull-right-not-lg, .pull-left-not-lg{
        float: none;
    }
    .pull-right-lg {
        float: right;
    }
    .pull-left-lg {
        float: left;
    }
}

Answer 4

Il n'est pas nécessaire de créer votre propre classe avec des requêtes multimédias. Bootstrap 3 a déjà un ordre de flottaison pour les points d'arrêt multimédias sous Column Ordering: http://getbootstrap.com/css/#grid-column-ordering

La syntaxe de la classe est col-<#grid-size>-(push|pull)-<#cols> où <#grid-size> est xs, sm, md ou lg et <#cols> est la distance que vous souhaitez que la colonne se déplace pour cette taille de grille. Push ou pull est bien sûr à gauche ou à droite.

Je l'utilise tout le temps donc je sais que ça fonctionne bien.

Answer 5

Fonctionne bien aussi:

/* petit écran portrait */

@media (max-width: 321px) {

  .pull-right { 
    float: none!important; 
  }

}

/* petit écran paysage */

@media (max-width: 480px) {

  .pull-right {
    float: none!important; 
  }

}