Las respuestas aquí funcionan para solo 2 celdas, pero tan pronto como esas columnas tienen 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 múltiples columnas.

Objetivos

Obtenga una secuencia vertical de etiquetas en el móvil para organizarse en cualquier orden que el diseño requiera en la tableta/escritorio. En este ejemplo concreto, una etiqueta debe entrar en flujo antes de lo que normalmente lo haría, y otra más tarde de lo que normalmente gustar.

Móvil

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

Comprimido +

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

Así que headline necesita barajar a la derecha en tablet+, y técnicamente, también desc - se encuentra por encima de la etiqueta de pie de foto que lo precede en el móvil. Verás en un momento que 4 caption también está en problemas.

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

Al igual que con todos los problemas de la cuadrícula de arranque, el paso 1 es realizar el HTML tiene que estar en orden móvil, 1 2 3 4 5, en la página. Luego, determine cómo hacer que la tableta/escritorio se reordene de esta manera, idealmente sin Javascript.

La solución para obtener 1 headline y 3 qty para sentarse a la derecha no a la izquierda es simplemente establecer ambos pull-right. Esto aplica CSS float: right, lo que significa que encuentran el primer espacio abierto que encajarán a la derecha. Puede pensar en el procesador CSS del navegador trabajando 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 de 1.

Pero esta solución no fue suficiente para 4 caption; porque las 2 celdas de la derecha son tan cortas 2 image en la izquierda tiende a ser más larga que las dos combinadas. Bootstrap Grid es un truco de flotador 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 derecha, no la izquierda donde queríamos se.

La solución aquí (y más generalmente para cualquier problema como este) fue agregar una etiqueta de hackeo, oculta en el móvil, que existe en la tableta + para empujar el título, que luego se cubre con un margen negativo, como esto:

[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 hackeo que pueden desaparecer en el móvil. En la tableta + las etiquetas hack permiten mostrar las etiquetas a aparecen más temprano o más tarde en el flujo, luego se tira hacia arriba o hacia abajo para cubrir esas etiquetas de hackeo.

Nota: He utilizado alturas fijas para el ejemplo simple en el 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 image y desc.

Nota 2: Dependiendo de su diseño, puede tener un orden de columna lo suficientemente consistente en tablet+ (o resoluciones más grandes), que puede evitar el uso de etiquetas hack, usando margin-bottom en su lugar, como así:

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

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

Actualizado en 2018

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). (A-B inversa 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ó: " No puedes cambiar el orden de las columnas en pantallas más pequeñas, pero puedes hacerlo en grandes screens ".

Sin embargo, esto debe aclararse para decir: "No se puede cambiar el orden de ancho completo columnas "apiladas" .."in Bootstrap 3.

Sin embargo, en Bootstrap 4 ahora es 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, haciendo es posible reordenar columnas de ancho completo.

Método 1-Utilizar 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-Utilizar flex-first para xs pantallas (o order-* en 4.0.0):

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

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

Octubre de 2017

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

La propiedad CSS "Order", 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 empatar esto con la pregunta del póster original. Con CSS, la barra de navegación, la barra lateral y el contenido se pueden dirigir y luego ordenar las propiedades aplicadas dentro de una consulta de medios.

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>

{[3] {} En[4]}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 entonces C, a continuación, aplicar order-{breakpoint}-first a B. Y aplique dos configuraciones diferentes, una que los hará compartir los mismos cols y otra que los hará 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 ellos (B + C = 12)

Así

<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

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>

Que simple

Si desea establecer la condición o 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 /