¿Cómo cambiar la posición de un div en Bootstrap para móvil?

WWWW · 23 Oct 2014

Bueno, en un momento creí leer sobre esto, pero ahora no encuentro donde fue y sobre todo la solución.

Este es mi código:

HTML:

<div class="row">
 <div class="col-md-7" >
   [Texto1] Muestra texto a la izquierda y de primero.
 </div>
 <div class="col-md-5">
   [Texto2] Muestra texto a la derecha y de segundo.
 </div>
</div>

En Pc se mira así:

- TITULO -
[Texto1---7---][Texto2 -5-]

Bueno, lo que quiero conseguir es que cuando se mire en móvil, cambie de ubicación los div's, quedando de esta forma.

En móvil:

- TITULO -
[Texto2 -5-]
[Texto1---7---]

Hacer que el segundo grupo de columnas se posicione arriba del primero.

Espero haberme entendido y agradezco cualquier tipo de ayuda, gracias.

kanikase · 23 Oct 2014

clear:both eso si usa float:left, si usa display:inline-block, usa display:block o para estar seguro usa los dos XD

clear: both;
display: block;

Angel Benites · 23 Oct 2014

Tendrias que usar

PHP:

@media only screen and (max-width: 319px) {
	.col-md-,col-md-5 {
		width: 95%!important;
	}

WWWW · 23 Oct 2014

[MENTION=81006]kanikase[/MENTION] [MENTION=43377]CrewArty[/MENTION]

Un no lo logro :sorrow: Sigue mostrando todo igual,

Bueno lo que me muestra mi actual estructura es:

- TITULO -
[Texto1---7---]
[Texto2 -5-]

Y yo quiero que me lo muestre así:

- TITULO -
[Texto2 -5-]
[Texto1---7---]

Si es posible un código inline style="" para probar rápido el efecto.

Gracias por su ayuda.

Angel Benites · 23 Oct 2014

WWWW dijo:
[MENTION=81006]kanikase[/MENTION] [MENTION=43377]CrewArty[/MENTION]

Un no lo logro :sorrow: Sigue mostrando todo igual,

Bueno lo que me muestra mi actual estructura es:

- TITULO -
[Texto1---7---]
[Texto2 -5-]

Y yo quiero que me lo muestre así:

- TITULO -
[Texto2 -5-]
[Texto1---7---]

Si es posible un código inline style="" para probar rápido el efecto.

Gracias por su ayuda.

Envia tu link 😀 😎😎😎

WWWW · 23 Oct 2014

CrewArty dijo:
Envia tu link 😀 😎😎😎

Estoy trabajando localmente 😕

kanikase · 23 Oct 2014

Insertar CODE, HTML o PHP:

.col-md-5,.col-md-7 {
display: block;
clear: both;
width: 100%;
}

WWWW · 23 Oct 2014

kanikase dijo:
Insertar CODE, HTML o PHP:

.col-md-5,.col-md-7 { display: block; clear: both; width: 100%; }

Lo que hace, es que me muestra habas versiones igual:

PC:
Titulo
[Contenido---7---]
[Lateral-5-]

móvil:
Titulo
[Contenido --7---]
[Lateral -5-]

Y bueno lo que yo quiero lograr es esto:

PC (Ya lo tengo) [Código original de rejillas]
Titulo
[Contenido ---7---][Lateral -5-]

Móvil
Titulo
[Lateral-5-]
[Contenido ---7---]

Prácticamente quiero mostrar columna lateral de primero si se muestra en móvil.

Gracias por tu tiempo [MENTION=81006]kanikase[/MENTION]

kanikase · 23 Oct 2014

Es que no se como lo tengas, pero creo que ya entendí:

Insertar CODE, HTML o PHP:

@ media screen and (max-width:480px) {
.col-md-5,.col-md-7 {
display: block;
clear: both;
width: 100%;
}
}

Sin espacio entre @ y media

WWWW · 23 Oct 2014

kanikase dijo:
Es que no se como lo tengas, pero creo que ya entendí:

Insertar CODE, HTML o PHP:

@ media screen and (max-width:480px) { .col-md-5,.col-md-7 { display: block; clear: both; width: 100%; } }

Sin espacio entre @ y media

Tampoco funciona, pero más o menos voy aprendiendo unas cosas en CSS, ya que el diseño no es mi fuerte por eso me guio por boostrap.

Bueno cuando se crea un archivo con bootstrap 3, y escribes lo siguiente:

HTML:

<div class="row">
 <div class="col-md-7" >
   [Texto1] Muestra texto a la izquierda y de primero.
 </div>
 <div class="col-md-5">
   [Texto2] Muestra texto a la derecha y de segundo.
 </div>
</div>

Se muestra como la imagen - Código Normal -

Y bueno prácticamente lo que quiero lograr es mostrar primero lo de verde para móviles, como se muestra en la imagen.

Gracias por su tiempo.

YeltsinReyes · 23 Oct 2014

y si lo pones asi

HTML:

<div class="row">

 <div class="col-md-5">
   [Texto2] Muestra texto a la derecha y de segundo.
 </div>

 <div class="col-md-7" >
   [Texto1] Muestra texto a la izquierda y de primero.
 </div>

</div>

HTML:

@ media (min-width: 992px)
.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
float: right;
}

Seguro tendrias que editar otras cosas :witless:

WWWW · 23 Oct 2014

YeltsinGraphs dijo:

y si lo pones asi

HTML:

<div class="row">

 <div class="col-md-5">
   [Texto2] Muestra texto a la derecha y de segundo.
 </div>

 <div class="col-md-7" >
   [Texto1] Muestra texto a la izquierda y de primero.
 </div>

</div>

HTML:

@ media (min-width: 992px)
.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
float: right;
}

Seguro tendrias que editar otras cosas :witless:

¡Ya funciono!

Gracias a [MENTION=1597]YeltsinGraphs[/MENTION] y su código, bueno ya que hacia lo contrario a lo que quería, solo cambie de posición los div y todo resuelto, 😱 pero mientras escribía este comentario note que YeltsinGraphs había cambiado de posición también de los div (Pese que solo los había copiado ) que despistado de mi parte :distant: por lo que no lo había notado.

También agradezco a [MENTION=81006]kanikase[/MENTION] y a [MENTION=43377]CrewArty[/MENTION] por su tiempo y ayuda.

Bueno, eso es todo, tema solucionado, saludos.

YeltsinReyes · 23 Oct 2014

Estamos para ayudar.!! [MENTION=41434]WWWW[/MENTION]:encouragement:

xSkArx · 23 Oct 2014

YeltsinGraphs dijo:

y si lo pones asi

HTML:

<div class="row">

 <div class="col-md-5">
   [Texto2] Muestra texto a la derecha y de segundo.
 </div>

 <div class="col-md-7" >
   [Texto1] Muestra texto a la izquierda y de primero.
 </div>

</div>

HTML:

@ media (min-width: 992px)
.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
float: right;
}

Seguro tendrias que editar otras cosas :witless:

Creo que es mejor asi

HTML:

@media(max-width:480px)
.col-md-7 {
float:right;
}

Y dejar los div como los tenia

¿Cómo cambiar la posición de un div en Bootstrap para móvil?

WWWW

kanikase

Angel Benites

WWWW

Angel Benites

WWWW

kanikase

WWWW

kanikase

WWWW

YeltsinReyes

WWWW

YeltsinReyes

xSkArx

Temas similares

Privacidad y transparencia

Privacidad y transparencia