Estoy haciendo un diseño sensible con un fijo superior de barra de exploración. Debajo tengo dos columnas, una para una barra lateral (3), y otra para el contenido (9). Que en el escritorio se parece a esto

navbar

[3][9]

Cuando me resize para móviles de la navbar es comprimido y ocultos, a continuación, la barra lateral se apilan en la parte superior del contenido, como este:

navbar

[3]

[9]

Me gustaría que el contenido principal en la parte superior, por lo que necesito para cambiar el orden en el móvil a este:

navbar

[9]

[3]

He encontrado este artículo que cubre los mismos puntos, pero la aceptó respuesta ha sido editado para decir que la solución no se aplica a la actual versión de Bootstrap.

¿Cómo puedo reordenar estas columnas en el móvil? O, alternativamente, ¿cómo puedo obtener el sidbar lista de grupo en mi expansión de la navbar?

Aquí está mi código:

<div class="navbar navbar-inverse navbar-static-top">
  <div class="container">
    <a href="#" class="navbar-brand">Brand Title</a>
    <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <div class="collapse navbar-collapse navHeaderCollapse">

    <ul class="nav navbar-nav navbar-right"><!--original navbar-->
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">FAQ</a></li>
    </ul>

    </div>
  </div>
</div><!--End Navbar Div-->
    <div class="container">
  <div class="row">

    <div class="col-lg-3">
  <div class="list-group">
    <a href="#" class="list-group-item">
    <h4 class="list-group-item-heading">Lorem ipsum</h4>
    <p class="list-group-item-text">Lorem Ipsum is simply dummy text.</p></a>
  </div>
</div><!--end sidebar-->


<div class="col-lg-9">
  <div class="panel panel-default">
    <div class="panel-body">
      <div class="page-header">
     Main Content
    </div>
  </div>
</div><!--end main content area-->
InformationsquelleAutor user3000310 | 2013-11-24

7 Comentarios

  1. 449

    Usted no puede cambiar el orden de las columnas en pantallas más pequeñas, pero se puede hacer que en las grandes pantallas.

    Para cambiar el orden de las columnas.

    <!--Main Content-->
    <div class="col-lg-9 col-lg-push-3">
    </div>
    
    <!--Sidebar-->
    <div class="col-lg-3 col-lg-pull-9">
    </div>

    Por defecto muestra el contenido principal en primer lugar.

    Así en el móvil principal de mostrar el contenido de la primera.

    Mediante col-lg-push y col-lg-pull podemos reordenar las columnas en las pantallas grandes y de visualización de la barra lateral de la izquierda y el contenido principal de la derecha.

    De trabajo el violín aquí.

    • Eso es exactamente lo que yo quería y su respuesta sentido perfecto, gracias!
    • ¿por qué se especifica que sólo en las grandes? en la oficial de ejemplo parece estar funcionando para el medio así. getbootstrap.com/css/#grid
    • He estado preguntando lo que el empuje y el tirón de las clases son buenas – ahora sé. Gracias.
    • buen tip gracias !
    • Poco después del lanzamiento oficial de 3.0 push/pull se puede utilizar para cambiar el orden de las columnas en cualquier tamaño de pantalla (xs,sm,md,lg) bootply.com/ft1tOI71cZ
    • usted es un protector de la vida hombre! Gracias!!!
    • Esto no funciona para toda la anchura de la vid, aunque.
    • Gracias por este. Esta beats positioning cols absolutely y tal!
    • Bien hecho bro..

  2. 57

    Actualizado 2018

    Para la original pregunta basada en Bootstrap 3, la solución fue usar push-pull.

    En Bootstrap 4 ahora posible para cambiar el orden, incluso cuando las columnas son de ancho completo apilados verticalmente, gracias a Bootstrap 4 flexbox. De la OFC, el push pull método funcionará, pero ahora hay otras formas de cambiar el orden de las columnas en Bootstrap 4, haciendo posible la re-ordenar el pleno columnas de ancho.

    Método 1: Utilice flex-column-reverse para xs pantallas:

    <div class="row flex-column-reverse flex-md-row">
        <div class="col-md-3">
            sidebar
        </div>
        <div class="col-md-9">
            main
        </div>
    </div>

    Método 2: Utilice order-first para xs pantallas:

    <div class="row">
        <div class="col-md-3">
            sidebar
        </div>
        <div class="col-md-9 order-first order-md-last">
            main
        </div>
    </div>

    Bootstrap 4(alfa 6): http://www.codeply.com/go/bBMOsvtJhD

    Bootstrap 4.1: https://www.codeply.com/go/e0v77yGtcr


    Original de 3.x Respuesta

    Para la original pregunta basada en Bootstrap 3, la solución fue usar push-pull para los más grandes, anchos y, a continuación, las columnas se muestran es su orden natural en la más pequeña (xs) de ancho. (A-B la inversa de a a B-A).

    <div class="container">
        <div class="row">
            <div class="col-md-9 col-md-push-3">
                main
            </div>
            <div class="col-md-3 col-md-pull-9">
                sidebar
            </div>
        </div>
    </div>

    Bootstrap 3: http://www.codeply.com/go/wgzJXs3gel

    @emre declaró, «Usted no puede cambiar el orden de las columnas en pantallas más pequeñas, pero se puede hacer que en las grandes pantallas de«. Sin embargo, esto debe aclararse que dicen: «Usted no puede cambiar el orden de de ancho completo «apilados» columnas..» en Bootstrap 3.

    • Me gustaría poder votar a esta respuesta una bazillion veces.
  3. 27

    Las respuestas aquí el trabajo de sólo 2 de las células, pero tan pronto como las columnas tienen más en ellos puede conducir a un poco más de complejidad. Creo que he encontrado una solución generalizada para cualquier número de celdas en varias columnas.

    Objetivos

    Obtener una secuencia vertical de etiquetas en el móvil se arreglan en cualquier orden de la llama diseño en la tablet/escritorio. En este ejemplo concreto, una etiqueta debe entrar en el flujo antes de lo que lo haría normalmente, y otro más tarde de lo que normalmente lo haría.

    Móvil

    [1 headline]
    [2 image]
    [3 qty]
    [4 caption]
    [5 desc]

    Tablet+

    [2 image  ][1 headline]
    [         ][3 qty     ]
    [         ][5 desc    ]
    [4 caption][          ]
    [         ][          ]

    Para titular las necesidades de reorganización de la derecha en la tablet+, y técnicamente, también lo hace desc – se sitúa por encima de la leyenda de la etiqueta que le precede en el móvil. Verás que en un momento 4 título está en problemas también.

    Supongamos que cada célula puede variar en altura, y debe estar al ras de arriba a abajo con su siguiente celda (gobernante débil trucos como una tabla).

    Como con todos Bootstrap Cuadrícula de problemas paso 1 es darse cuenta de que el HTML tiene que estar en el móvil de orden 1 2 3 4 5 en la página. A continuación, determinar cómo obtener tablet/escritorio para reordenar a sí mismo de esta manera, idealmente sin Javascript.

    La solución para conseguir 1 headline y 3 qty para sentarse a la derecha, no la izquierda es simplemente un conjunto de ellos, tanto pull-right. Esto se aplica CSS float: right, lo que significa que encontrar el primer espacio abierto van a encajar a la derecha. Usted puede pensar que el navegador CSS del procesador trabajando en el siguiente orden: 1 se ajusta en la parte superior derecha de la esquina. 2 es el siguiente y es regular (float: left), así que va a la esquina superior izquierda. Luego de 3, que es float: right por lo que salta sobre por debajo de 1.

    Pero esta solución no era suficiente para 4 caption; porque el derecho 2 células son tan corto 2 image de la izquierda tiende a ser más largo que los dos de ellos juntos. Rejilla Bootstrap es un cuerpo glorificado float hack, lo que significa 4 caption es float: left. Con 2 image ocupando mucho espacio en la izquierda, 4 caption intenta encajar en el siguiente espacio disponible, con frecuencia en la columna de la derecha, no la izquierda, donde nosotros queríamos.

    La solución aquí (y en general cualquier asunto como este) era agregar un hack etiqueta, oculto en el móvil, que existe en la tablet+ para empujar el título, que luego se cubre por un margen negativo – como este:

    [2 image  ][1 headline]
    [         ][3 qty     ]
    [         ][4 hack    ]
    [5 caption][6 desc ^^^]
    [         ][          ]

    http://jsfiddle.net/b9chris/52VtD/16633/

    HTML:

    <div id=headline class="col-xs-12 col-sm-6 pull-right">Product Headline</div>
    <div id=image class="col-xs-12 col-sm-6">Product Image</div>
    <div id=qty class="col-xs-12 col-sm-6 pull-right">Qty, Add to cart</div>
    <div id=hack class="hidden-xs col-sm-6">Hack</div>
    <div id=caption class="col-xs-12 col-sm-6">Product image caption</div>
    <div id=desc class="col-xs-12 col-sm-6 pull-right">Product description</div>

    CSS:

    #hack { height: 50px; }
    
    @media (min-width: @screen-sm) {
        #desc { margin-top: -50px; }
    }

    Así, la generalización de la solución es añadir hack etiquetas que pueden desaparecer en el móvil. En la tablet+ el hack etiquetas permiten muestra las etiquetas que aparecen más temprano o más tarde en el flujo, entonces se tira hacia arriba o hacia abajo para cubrir los hack etiquetas.

    Nota: he usado fijo alturas por el bien de la simple ejemplo en los enlaces de jsfiddle, pero el real contenido del sitio en el que estaba trabajando varía en altura en todas las 5 etiquetas. Se hace adecuadamente con relativamente variación grande en la etiqueta de alturas, especialmente de la imagen y desc.

    Nota 2: Dependiendo de su diseño, usted puede tener una consistente orden de las columnas en la tablet+ (o más resoluciones), que puede evitar el uso de hack etiquetas, utilizando margin-bottom lugar, así:

    Nota 3: Este utiliza Bootstrap 3. Bootstrap 4 utiliza una cuadrícula diferentes conjunto, y no funciona con estos ejemplos.

    http://jsfiddle.net/b9chris/52VtD/16632/

    • Muchas gracias por esta maravillosa explicación. He trabajando en algo similar en el trabajo para 3 días y continuaba poniendo abajo, de no saber a donde ir. Gracias!
    • Esta solución funcionó perfecto para mí. Gracias
    • Mejor… Gracias ❤️
  4. 5

    De octubre de 2017

    Me gustaría añadir otro Bootstrap 4 solución. Uno que trabajó para mí.

    De la CSS «Orden» de la propiedad, combinada con una consulta de medios de comunicación, se puede utilizar para volver a ordenar las columnas cuando se colectan en pantallas más pequeñas.

    Algo como esto:

    @media only screen and (max-width: 768px) {
        #first {
            order: 2;
        }
        #second {
            order: 4;
        }
        #third {
            order: 1;
        }
        #fourth {
            order: 3;
        }
    }

    CodePen Enlace: https://codepen.io/preston206/pen/EwrXqm

    Ajustar el tamaño de la pantalla y verás las columnas se colectan en un orden diferente.

    Voy a vincular con el cartel original de la pregunta. Con CSS, la barra de navegación, barra lateral, y el contenido puede ser objetivo y, a continuación, el fin de las propiedades se aplican dentro de una consulta de medios de comunicación.

  5. 4

    En Bootstrap 4, si quieres hacer algo como esto:

        Mobile  |   Desktop
    -----------------------------
        A       |       A
        C       |   B       C
        B       |       D
        D       |

    Usted necesita para invertir el orden de B luego C, a continuación, aplicar order-{breakpoint}-first a B. Y aplicar dos configuraciones diferentes, uno que se va a hacer de ellos comparten la misma cols y otros que les hacen tomar el ancho completo de la 12 cols:

    • Pantallas más pequeñas: 12 cols para B y 12 cols para C

    • Pantallas más grandes: 12 cols entre la suma de ellos (B + C = 12)

    Como este

    <div class='row no-gutters'>
        <div class='col-12'>
            A
        </div>
        <div class='col-12'>
            <div class='row no-gutters'>
                <div class='col-12 col-md-6'>
                    C
                </div>
                <div class='col-12 col-md-6 order-md-first'>
                    B
                </div>
            </div>
        </div>
        <div class='col-12'>
            D
        </div>
    </div>

    Demo: https://codepen.io/anon/pen/wXLGKa

  6. 1

    Comenzando con la versión móvil en primer lugar, usted puede lograr lo que desee, la mayoría del tiempo.

    Ejemplos aquí:

    http://jsbin.com/wulexiq/edit?html,css,salida

    <div class="container">
          <h1>PUSH - PULL Bootstrap demo</h1>
        <h2>Version 1:</h2>
    
        <div class="row">
    
          <div class="col-xs-12 col-sm-5 col-sm-push-3 green">
            IN MIDDLE ON SMALL/MEDIUM/LARGE SCREEN
            <hr> TOP ROW XS-SMALL SCREEN
          </div>
    
          <div class="col-xs-12 col-sm-4 col-sm-push-3 gold">
            TO THE RIGHT ON SMALL/MEDIUM/LARGE SCREEN
            <hr> MIDDLE ROW ON XS-SMALL
          </div>
    
          <div class="col-xs-12 col-sm-3 col-sm-pull-9 red">
            TO THE LEFT ON SMALL/MEDIUM/LARGE SCREEN
            <hr> BOTTOM ROW ON XS-SMALL
          </div>
    
        </div>
    
        <h2>Version 2:</h2>
    
        <div class="row">
    
          <div class="col-xs-12 col-sm-4 col-sm-push-8 yellow">
            TO THE RIGHT ON SMALL/MEDIUM/LARGE SCREEN
            <hr> TOP ROW ON XS-SMALL
          </div>
    
          <div class="col-xs-12 col-sm-4 col-sm-pull-4 blue">
            TO THE LEFT ON SMALL/MEDIUM/LARGE SCREEN
            <hr> MIDDLE ROW XS-SMALL SCREEN
          </div>
    
          <div class="col-xs-12 col-sm-4 col-sm-pull-4 pink">
            IN MIDDLE ON SMALL/MEDIUM/LARGE SCREEN
            <hr> BOTTOM ROW ON XS-SMALL
          </div>
    
        </div>
    
        <h2>Version 3:</h2>
    
        <div class="row">
    
          <div class="col-xs-12 col-sm-5 cyan">
            TO THE LEFT ON SMALL/MEDIUM/LARGE SCREEN TOP ROW ON XS-SMALL
          </div>
    
          <div class="col-xs-12 col-sm-3 col-sm-push-4 orange">
            TO THE RIGHT ON SMALL/MEDIUM/LARGE SCREEN
            <hr> MIDDLE ROW ON XS-SMALL
          </div>
    
          <div class="col-xs-12 col-sm-4 col-sm-pull-3 brown">
            IN THE MIDDLE ON SMALL/MEDIUM/LARGE SCREEN
            <hr> BOTTOM ROW XS-SMALL SCREEN
          </div>
    
        </div>
    
        <h2>Version 4:</h2>
        <div class="row">
    
          <div class="col-xs-12 col-sm-4 col-sm-push-8 darkblue">
            TO THE RIGHT ON SMALL/MEDIUM/LARGE SCREEN
            <hr> TOP ROW XS-SMALL SCREEN
          </div>
    
          <div class="col-xs-12 col-sm-4 beige">
            MIDDLE ON SMALL/MEDIUM/LARGE SCREEN
            <hr> MIDDLE ROW ON XS-SMALL
          </div>
    
          <div class="col-xs-12 col-sm-4 col-sm-pull-8 silver">
            TO THE LEFT ON SMALL/MEDIUM/LARGE SCREEN
            <hr> BOTTOM ROW ON XS-SMALL
          </div>
    
        </div>
    
      </div>
  7. -1

    Esto es muy fácil con jQuery usando insertAfter() o insertBefore().

    <div class="left">content</div>
    <div class="right">sidebar</div>

    JS:

    <script>
    $('.right').insertBefore('left');
    </script>

    Que simple

    si desea establecer o condición para dispositivos móviles que usted puede hacer como este

    JS:

    <script>
      var $iW = $(window).innerWidth();
      if ($iW < 992){
         $('.right').insertBefore('.left');
      }else{
         $('.right').insertAfter('.left');
      }
    </script>

    ejemplo
    https://jsfiddle.net/w9n27k23/

    • Gracias mucho , guardar el día de mi hombre!
    • Es realmente una mala sensación cuando ves a alguien usando JS para corregir el problema con HTML/CSS de la arquitectura. No corregir el problema, usted se acaba de ocultar.
    • entonces, ¿qué? A veces JS soluciones podrían ser mucho más viable. Bootstrap no es de puro CSS, también utiliza JS.

Dejar respuesta

Please enter your comment!
Please enter your name here