web-dev-qa-db-fra.com

Bootstrap 3 modification de l'ordre des div sur les petits écrans uniquement

Faire mon 1er design réactif et c'est quelque chose comme ça possible dans Bootstrap 3. Modifiez cela

À

Modifiez l'ordre essentiellement d'une disposition à 3 colonnes sur de grands écrans pour déplacer le logo vers la gauche et empilez les deux autres colonnes sur des écrans plus petits uniquement. Je voudrais le faire en utilisant les classes Bootstrap (col-xs-6 col-md-4, etc.) si possible et ne pas avoir à dupliquer le contenu de manière à afficher/masquer. J'ai aimé la disposition de la grille que bootstrap3 fournit pour les grands écrans, donc je préférerais la conserver si je pouvais trier la disposition sur des écrans plus petits.

csstwitter-bootstrapsortingmobile
23
Jay

DÉMO: http://jsbin.com/uZiKAha/1

DEMO w/edit: http://jsbin.com/uZiKAha/1/edit

Oui, cela peut être fait sans JS en utilisant l'imbrication BS3 et en poussant/tirant et tous les flotteurs clairs:

 <div class="container">
  <div class="row">
   <div class="col-xs-6 col-sm-4 col-sm-Push-4 boxlogo">
    LOGO
   </div>
   <div class="col-xs-6 col-sm-8">
    <div class="row">
     <div class="col-sm-6 col-sm-pull-6 boxb">
      B
     </div>
     <div class="col-sm-6 boxa">
      A
     </div>
    </div>
    <!--nested .row-->

   </div>
  </div>
 </div>
35
Christina

Utilisation de bootstrap 3:

<div class="row row-fluid">
   <div class="col-md-6 col-md-Push-6">
       <img src="some-image.png">
   </div>

   <div class="col-md-6 col-md-pull-6">
       <h1>Headline</h1>
       <p>Lorem ipsum text of Doom</p>
   </div>
</div>

Cela fonctionne parce que quand il y a suffisamment d'espace, ils flottent dans leurs positions d'origine au début. Cependant, lorsqu'ils sont de taille moyenne et que l'espace est perdu, ils s'empilent car ils ne peuvent pas flotter les uns dans les autres. Notez que même si j'ai utilisé 6 colonnes pour les deux, cela fonctionne même si elles ne sont PAS les deux 6 colonnes.

Voici le lien: http://ageekandhisblog.com/bootstrap-3-change-stacking-order/

5
jroi_web

En général, vous souhaitez regrouper les éléments qui s'empilent, mais dans votre cas, B et A ne peuvent pas être groupés car Logo doit être inséré entre eux dans un cas. Vous avez deux options

Sans utiliser JS, je pense que ce sera votre meilleure option. violon ici

<div class="container">
    <div class="logo col-sm-4 col-xs-6 col-sm-Push-4">Logo<br/>Logo</div>
    <div class="contentB col-sm-4 col-xs-6 col-sm-pull-4">B</div>
    <div class="contentA col-sm-4 col-xs-6 col-xs-offset-6 col-sm-offset-0">A</div>
</div>

L'idée est d'utiliser la propriété de survol des lignes pour pousser A vers le bas dans le cas xs. J'utilise également les classes Push/Pull pour réorganiser les divs dans le cas sm. Cependant, le problème ici est si Logo est plus grand que B. Puisque tout est sur la même grille, A s'aligne avec le bas de l'élément le plus grand, nous donnant un espace vide entre Logo et B. Cela n'a vraiment aucune solution avec le pur Bootstrap CSS. (Peut-être que quelqu'un peut me corriger)

Au lieu de cela, je vous suggère d'utiliser JS pour déplacer le div lorsque la fenêtre se redimensionne. violon ici

<div class="container">
    <div id="column1" class="row col-xs-6 col-sm-8">
        <div id="B" class="col-xs-12 col-sm-6">B</div>
        <div id="logo" class="col-xs-12 col-sm-6">Logo<br/>Logo</div>
    </div>
    <div id="column2" class="row col-xs-6 col-sm-4">
        <div id="A" class="col-xs-12 col-sm-12 ">A</div>
    </div>
</div>

et le JS

$(function() {
    $(window).resize(function() {
        var w = $(window).width();
        if (w < 768 && $('#column1').children().length > 1) {
            $('#B').prependTo( $('#column2') );
        } else if (w > 768 && $('#column2').children().length > 1) {
            $('#B').prependTo( $('#column1') );
        }
    });
});

EDIT: référencez le bootstrap grid docs pour plus d'informations sur les classes Push/pull/offset.

2
kalhartt

J'ai réussi à résoudre ce problème en échangeant le contenu des colonnes à l'aide de jQuery, voici le balisage:

<div class="container">
    <div class="row">
        <div class="col-sm-4 swap-col">
            columns 1
        </div>

        <div class="col-sm-4 swap-col">
            columns 2
        </div>

        <div class="col-sm-4 swap-col">
            columns 3
        </div>
    </div>
 </div>

Et voici le script jQuery:

$(document).ready(function(){

    var col1_data,col2_data;

    col1_data = $(".footer-col:nth-child(1)").html();
    col2_data = $(".footer-col:nth-child(2)").html();

    var w = $(window).width();        

    if (w < 768)
    swap_columns();

    function swap_columns()
    {
        var w = $(window).width();
        if (w < 768)
        {
            $(".footer-col:nth-child(2)").html(col1_data);
            $(".footer-col:nth-child(1)").html(col2_data);
        }
        else
        {
            $(".footer-col:nth-child(1)").html(col1_data);
            $(".footer-col:nth-child(2)").html(col2_data);
        }
    }


    $(window).resize(function() {
        swap_columns();
    });
});

J'espère que ça aide.

1
Abdo Belk