Posiciones de columna de Twitter Bootstrap

Tengo dos columnas que me gustaría mostrar una al lado de la otra en un escritorio.

Quiero el siguiente orden de columnas en un escritorio (la columna 2 es más alta que la columna 1):

[Column 1][Column 2] [Column 3] 

Quiero el siguiente orden de columnas en un dispositivo móvil:

 [Column 1] [Column 2] [Column 3] 

Aquí hay un ejemplo que he creado: http://jsbin.com/folekajera/1/edit?html,css,output

El problema con el ejemplo es que en la vista de escritorio hay un espacio entre la Columna 1 y la Columna 3.

¿Cómo se eliminaría esta brecha?

La razón por la que tiene la brecha en la vista de escritorio es que la cuadrícula de Bootstrap tiene 12 columnas / fila. Entonces, los primeros dos div usan el ancho de una fila completa. La tercera columna está efectivamente en su propia fila. La respuesta de Nitin tiene la forma correcta de manejar el diseño móvil.

Por lo tanto, el html efectivo que tienes es el siguiente.


Editar – Después de tu comentario, volví a pensar mi respuesta. Hay una manera de hacerlo. He revisado el html de mi primera respuesta. El elemento clave es la clase “pull-right” a continuación. Para más detalles, vea Ordenar columnas .

Le he actualizado el archivo jsbin en http://jsbin.com/rinejayojo/1/edit?html,css,output

Cuando desee que algo esté completo en el dispositivo móvil, su clase será “col-xs-12”.

Así es como debería ser.

 
Column 1
Column 2
Column 3