¿Cómo cambio el orden de las columnas de Bootstrap 3 en el diseño móvil?

Estoy haciendo un diseño receptivo con una barra de navegación fija superior. Debajo tengo dos columnas, una para una barra lateral (3) y otra para el contenido (9). Que en el escritorio se ve así

barra de navegación
[3] [9]

Cuando estoy resizeen el móvil, navbarse comprime y se oculta, luego la barra lateral se apila sobre el contenido, de esta manera:

barra de navegación
[3]
[9]

Me gustaría que el contenido principal esté en la parte superior, así que necesito cambiar el orden en dispositivos móviles a esto:

barra de navegación
[9]
[3]

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

¿Cómo puedo reordenar estas columnas en dispositivos móviles? O, alternativamente, ¿cómo puedo obtener el grupo de lista de sidbar en mi barra de navegación desplegable?

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-->

No puede cambiar el orden de las columnas en pantallas más pequeñas, pero puede hacerlo en pantallas grandes.

Entonces cambie el orden de sus 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, esto muestra primero el contenido principal.

Entonces, en el móvil, el contenido principal se muestra primero.

Al usar col-lg-pushy col-lg-pullpodemos reordenar las columnas en pantallas grandes y mostrar la barra lateral a la izquierda y el contenido principal a la derecha.

Trabajando violín aquí .

Actualizado 2018

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

En Bootstrap 4 ahora es posible cambiar el orden, incluso cuando las columnas están apiladas verticalmente en todo el ancho , gracias a Bootstrap 4 flexbox. OFC, el método push pull seguirá funcionando, pero ahora hay otras formas de cambiar el orden de las columnas en Bootstrap 4, lo que permite reordenar columnas de ancho completo.

Método 1 - Uso flex-column-reversepara xspantallas:

<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 - Uso order-firstpara xspantallas:

<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 (alpha 6): http://www.codeply.com/go/bBMOsvtJhD
Bootstrap 4.1: https://www.codeply.com/go/e0v77yGtcr

Respuesta original 3.x

Para la pregunta original basada en Bootstrap 3 , la solución fue usar push-pull para los anchos más grandes, y luego las columnas mostrarán su orden natural en anchos más pequeños (xs). (AB reverso a BA).

<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ó: " No puede cambiar el orden de las columnas en pantallas más pequeñas, pero puede hacerlo en pantallas grandes ". Sin embargo, esto debe aclararse para indicar: "No puede cambiar el orden de las columnas" apiladas "de ancho completo ..." en Bootstrap 3.

Las respuestas aquí funcionan para solo 2 celdas, pero tan pronto como esas columnas tengan más en ellas, 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 Obtenga una secuencia vertical de etiquetas en dispositivos móviles para organizarse en el orden que requiera el diseño en la tableta / escritorio. En este ejemplo concreto, una etiqueta debe ingresar al flujo antes de lo normal y otra más tarde de lo normal.

##Móvil

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

## Tablet +

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

Por lo tanto, el título debe mezclarse directamente en la tableta +, y técnicamente, también lo hace desc - se encuentra sobre la etiqueta de título que lo precede en el móvil. Verá en un momento 4 subtítulos también está en problemas.

Supongamos que cada celda puede variar en altura, y debe estar alineada de arriba a abajo con su siguiente celda (descartando trucos débiles como una tabla).

Al igual que con todos los problemas de Bootstrap Grid, el paso 1 es darse cuenta de que el HTML debe estar en orden móvil, 1 2 3 4 5, en la página. Luego, determine cómo hacer que una tableta / escritorio se reordene de esta manera, idealmente sin Javascript.

La solución para obtener 1 headliney 3 qtysentarse a la derecha, no a la izquierda es simplemente establecerlos a ambos pull-right. Esto aplica CSS float: right, lo que significa que encuentran el primer espacio abierto en el que encajarán correctamente. Puede pensar en el procesador CSS del navegador funcionando en el siguiente orden: 1 encaja en la esquina superior derecha. 2 es el siguiente y es regular ( float: left), por lo que va a la esquina superior izquierda. Luego 3, que es float: rightasí, salta por debajo de 1.

Pero esta solución no fue suficiente para 4 captions; porque las 2 celdas de la derecha son tan cortas 2 imagea la izquierda tienden a ser más largas que las dos combinadas. Bootstrap Grid es un hack de flotador glorificado, 4 caption es decir float: left. Al 2 imagesocupar tanto espacio a la izquierda, 4 captionintenta encajar en el siguiente espacio disponible, a menudo la columna derecha, no la izquierda donde la queríamos.

La solución aquí (y en general para cualquier problema como este) fue agregar una etiqueta de pirateo, oculta en el móvil, que existe en la tableta + para eliminar los subtítulos, que luego se cubre con un margen negativo, como este:

[2 image  ][1 headline]
[         ][3 qty     ]
[         ][4 hack    ]
[5 captions][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; }
}

Entonces, la solución generalizada aquí es agregar etiquetas de pirateo que pueden desaparecer en dispositivos móviles. En la tableta + el pirateo, las etiquetas permiten que las etiquetas mostradas aparezcan más temprano o más tarde en el flujo, luego se levantan o bajan para cubrir esas etiquetas de pirateo.

Nota: He usado alturas fijas por el simple ejemplo en el jsfiddle vinculado, pero el contenido real del sitio en el que estaba trabajando varía en altura en las 5 etiquetas. Se procesa correctamente con una variación relativamente grande en las alturas de las etiquetas, especialmente imagen y desc.

Nota 2: Dependiendo de su diseño, puede tener un orden de columnas lo suficientemente consistente en la tableta + (o resoluciones más grandes), que puede evitar el uso de etiquetas de pirateo, utilizando en su margin-bottomlugar, así:

Nota 3: Esto usa Bootstrap 3. Bootstrap 4 usa un conjunto de cuadrícula diferente y no funcionará con estos ejemplos.

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

Octubre de 2017

Me gustaría agregar otra solución Bootstrap 4. Uno que funcionó para mí.

La propiedad "Ordenar" de CSS, combinada con una consulta de medios, se puede usar para reordenar columnas cuando se apilan 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;
    }
}

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

Ajuste el tamaño de la pantalla y verá que las columnas se apilan en un orden diferente.

Voy a vincular esto con la pregunta del póster original. Con CSS, la barra de navegación, la barra lateral y el contenido pueden orientarse y luego ordenar las propiedades aplicadas dentro de una consulta de medios.

En Bootstrap 4 , si quieres hacer algo como esto:

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

Es necesario invertir el orden de B entonces C y luego se aplica order-{breakpoint}-firsta B . Y aplique dos configuraciones diferentes, una que hará que compartan los mismos cols y otra que los haga tomar el ancho completo de los 12 cols:

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

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

Me gusta esto

<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>

Demostración: https://codepen.io/anon/pen/wXLGKa

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

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

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

Así de simple

si desea establecer una condición para dispositivos móviles, puede hacerlo así

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

ejemplo https://jsfiddle.net/w9n27k23/

Comenzando con la versión móvil primero, puede lograr lo que desea, la mayoría de las veces.

Ejemplos aquí:

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

<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>