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

  • Autor Autor WWWW
  • Fecha de inicio Fecha de inicio
WWWW

WWWW

Pi
Verificación en dos pasos activada
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.
 
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;
 
Tendrias que usar

PHP: 
@media only screen and (max-width: 319px) {
	.col-md-,col-md-5 {
		width: 95%!important;
	}
 
[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.
 
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.
Hacer clic para expandir...

Envia tu link 😀 😎😎😎
 
Insertar CODE, HTML o PHP: 
.col-md-5,.col-md-7 {
display: block;
clear: both;
width: 100%;
}
 
kanikase dijo:
Insertar CODE, HTML o PHP: 
.col-md-5,.col-md-7 {
display: block;
clear: both;
width: 100%;
}
Hacer clic para expandir...

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]
 
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
 
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
Hacer clic para expandir...


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.

PCMovil.webp


Gracias por su tiempo.
 
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:
 
Última edición:
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:
Hacer clic para expandir...



¡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.
 
Última edición:
Estamos para ayudar.!! [MENTION=41434]WWWW[/MENTION]:encouragement:
 
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:
Hacer clic para expandir...

Creo que es mejor asi

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

Y dejar los div como los tenia
 
Hay que estar conectado o registrado para responder aquí.
Atrás
Arriba