2

tengo un formulario creado con varios div en filas y columnas, mi pretensión es que la columna de la derecha cargara debajo de las otras columnas, es decir en version movil cargaria fila 1 columna 1 columna 2, debajo, fila 2 columna 1 columna 2, y debajo fila 1 columna 3 fila 2 columna 3, os adjunto capturas y codigo .. ¿es posible?

En mi código sería que la columna con class "column 30-2" sea la que cargue bien debajo o bien encima de la fila del recaptcha (me es indiferente).

<fieldset>
      <div class="row">
         <div class="column30">     
            [text* text-905 placeholder "Tu nombre"]
         </div>
         <div class="column40">
            [email* email-265 placeholder "Tu email"]
         </div>
      </div>
      <div class="row">
         <div class="column30">     
            [tel* tel-367 placeholder "Tu teléfono"]
         </div>
         <div class="column40">
            [text your-subject placeholder "Tu asunto"]
         </div>
         <div class="column30-2">
            [acceptance acceptance-267] Acepto la política de privacidad [/acceptance]
         </div>
      </div>
      <div class="row">
         <div class="column70">
            [textarea textarea-440 placeholder "Tu mensaje"]
         </div>
         <div class="column30-2">
            <center>
               [submit "Enviar mensaje"]
            </center>
         </div>
      </div>
       <div class="row">
         <div class="column70">
              [recaptcha]
         </div>
     </div>
</fieldset>

form version web

form version movil actual

3 respuestas 3

1

Tienes clase "row" que representa filas. Dentro de una fila podria quedar mas abajo, pero recaptcha esta en otra fila, inferior. Asi que no es posible sin hacer manipulaciones adicionales. Opciones de solución:

  1. Creas 2 divs, el actual y otro debajo de recaptcha. Y luego con media query (@media only screen and (max-width: XXXpx)) ocultas o visualizas los divs. Si es pantalla completa muestas un div y otro ocultas. Luego lo inviertas.
  2. Crear un JavaScript que detecta tamaño de la pantalla y corta objeto DOM de su posición actual y recoloca en otra posición. Si le asignas los "id's" es bastante facil:

    document.getElementById('id1').appendChild(document.getElementById('id2'));
    
  3. o mas generico usar insertBefore()

6
  • Si me puedes explicar un poco el tema de "corta objeto DOM", nunca trabaje con ello. Gracias.
    – David
    el 21 may. 2019 a las 8:01
  • @David, te lo explico, pero es una solución que no recomiendo. Creo que mejor repensar tu diseño si es posible, en lugar de aplicar soluciones con JavaScript. Al DIV que tiene el texto "Acepto la política de privacidad" le tienes que asignar un ID, para poder lo manejar con mayor facilidad: <div id='politicaprivacidad' class='column30-2'> el 21 may. 2019 a las 9:15
  • El script, tienes que añadir por ejemplo antes del </body>. De esta manera se ejecutara, cuando ya se habra cargado todo el DOM con toda su estructura y sabras el tamaño de pantalla. Luego lo que haces es mover elemento dentro del DOM. Por un lado obtienes elemento a mover. Luego el elemento padre donde lo quieres colocar. Luego haces la operacion de mover. Pero te repito, no es una solución optima. Yo creo que es mejor hacer rediseño de estructura de los DIVS, por ejemplo tienes: DIV global y dentro div para parte izquierda y otro div para parte derecha. Luego redimencionas segun tamaño el 21 may. 2019 a las 9:33
  • de pantalla. Dentro del div izquierdo puedes hacer lo que quieres y en el derecho colocas todo, lo que tiene que aparecer en la parte inferior si lo miramos con mobil. El div izquierdo quedara arriba y todo lo que esta en div de derecha quedara abajo. el 21 may. 2019 a las 9:38
  • Lo rediseñe y con reglas de flex lo tengo listo, gracias!
    – David
    el 21 may. 2019 a las 10:29
1

No veo porque no puede ser lo que planteas. Si lo que necesitas en en concreto que .column30-2 cargue encima de captcha basta con que le des propiedades con css para que en el breakpoint que quieras se comporte como un elemento que se posicione de ese modo. Por ejemplo:

  @media only screen and (max-width: 768px) {
    .column30-2 {width: 100%; margin:5px;display:inline-block}
  }

Del mismo modo puedes posicionar cualquiera de los elementos del código html que compartes para que se comporten como necesitas en cada una de las dimensiones de pantalla en que quieras que cambie su ibicación o su tamaño.

Si quieres que tal y como está tu código ahora carguen todos elementos uno debajo de otro ocupando todo el ancho de pantalla en móvil puede ser algo así:

  @media only screen and (max-width: 600px) {
    .column30 {width: 100%; margin:5px;display:inline-block}
    .column40 {width: 100%; margin:5px;display:inline-block}
    .column70 {width: 100%; margin:5px;display:inline-block}
    .column30-2 {width: 100%; margin:5px;display:inline-block}
  }
0

Puedes hacerlo con CSS colocando lo siguiente en el media query que deseas que se aplique:

fieldset {display: flex; flex-direction: column;}

Y colocarías automáticamente todo en una sola columna!

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.