Solución:
No puede cambiar el orden de las columnas en pantallas más pequeñas, pero puede hacerlo en pantallas grandes.
Así que cambia el orden de tus columnas.
<!--Main Content-->
<div class="col-lg-9 col-lg-push-3">
</div>
<!--Sidebar-->
<div class="col-lg-3 col-lg-pull-9">
</div>
De forma predeterminada, esto muestra primero el contenido principal.
Por tanto, en el móvil, el contenido principal se muestra primero.
Mediante el uso col-lg-push y col-lg-pull podemos reordenar las columnas en pantallas grandes y mostrar la barra lateral a la izquierda y el contenido principal a la derecha.
Trabajando el violín aquí.
Actualizado 2018
Para el original pregunta basada en Bootstrap 3, la solución fue usar push-pull.
En Bootstrap 4 Nieva posible para cambiar el orden, incluso cuando las columnas están apiladas de ancho completo verticalmente, 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 hace posible reordenar las columnas de ancho completo.
Método 1: uso flex-column-reverse por 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: uso order-first por 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 (alpha 6): http://www.codeply.com/go/bBMOsvtJhD
Bootstrap 4.1: https://www.codeply.com/go/e0v77yGtcr
Respuesta original 3.x
Para el original pregunta 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 al revés 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 decir:” No se puede cambiar el orden de ancho completo columnas “apiladas”.. “en Bootstrap 3.
Las respuestas aquí funcionan para solo 2 celdas, pero tan pronto como esas columnas tengan más, puede generar un poco más de complejidad. Creo que encontré una solución generalizada para cualquier número de celdas en múltiples columnas.
#Objetivos Obtenga una secuencia vertical de etiquetas en el dispositivo móvil para organizarlas en el orden que requiera el diseño en la tableta / computadora de escritorio. En este ejemplo concreto, una etiqueta debe ingresar al flujo antes de lo que lo haría normalmente, y otra más tarde de lo que lo haría normalmente.
##Móvil
[1 headline]
[2 image]
[3 qty]
[4 caption]
[5 desc]
## Tableta +
[2 image ][1 headline]
[ ][3 qty ]
[ ][5 desc ]
[4 caption][ ]
[ ][ ]
Por lo tanto, el título debe reproducirse directamente en la tableta + y, técnicamente, también desc: se encuentra sobre la etiqueta de título que lo precede en el dispositivo móvil. Verás en un momento que 4 subtítulos también están 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 mesa).
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 la tableta / computadora de escritorio se reordene de esta manera, idealmente sin Javascript.
La solución para conseguir 1 headline y 3 qty sentarse a la derecha, no a la izquierda, es simplemente configurar ambos pull-right. Esto aplica CSS float: right, lo que significa que encuentran el primer espacio abierto que caben a la derecha. 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: right por lo que salta por debajo 1.
Pero esta solución no fue suficiente para 4 caption; porque las 2 celdas de la derecha son muy cortas 2 image a la izquierda tiende a ser más largo que ambos combinados. Bootstrap Grid es un truco flotante glorificado, lo que significa 4 caption es float: left. Con 2 image ocupando tanto espacio a la izquierda, 4 caption intenta encajar en el siguiente espacio disponible, a menudo la columna de la derecha, no la de la izquierda, donde la queríamos.
La solución aquí (y más 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 el título, que luego queda cubierto 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; }
}
Entonces, la solución generalizada aquí es agregar etiquetas de pirateo que pueden desaparecer en el móvil. En la tableta +, las etiquetas de pirateo permiten que las etiquetas mostradas aparezcan antes o después en el flujo, luego se suben o bajan para cubrir esas etiquetas de pirateo.
Nota: He usado alturas fijas por el simple ejemplo del jsfiddle vinculado, pero el contenido real del sitio en el que estaba trabajando varía en altura en las 5 etiquetas. Se representa correctamente con una variación relativamente grande en las alturas de las etiquetas, especialmente la imagen y la descripción.
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 margin-bottom en cambio, así:
Nota 3: Esto usa Bootstrap 3. Bootstrap 4 usa un conjunto de cuadrículas diferente y no funcionará con estos ejemplos.
http://jsfiddle.net/b9chris/52VtD/16632/