tablas - formularios css plantillas

Problemas de la base de zurb para ordenar el uso de dispositivos móviles y apilamiento hace que la entrada de formularios no se pueda hacer clic

Question

Estoy usando la base de zurb para ayudarme a hacer que un sitio web responda. La idea es que el encabezado se vea así en pantallas más grandes (y lo haga):

####### |------ Search ----------| %%%%%%%%%%%

Y esto en pantallas más pequeñas (que no):

###### %%%%%%%%%%
|---- Search ---|

Hay dos problemas El primero es que el móvil en realidad se ve así:

###### 
|---- Search ---|
       %%%%%%%%%%

Y el segundo es que la barra de búsqueda no se puede hacer clic . Intenté cambiar el índice Z y hacer que la fila muestre contenido oculto, pero no sirvió. Para el diseño intenté empujar y tirar el móvil, pero eso solo empeoró las cosas. El código para el diseño está a continuación.

Curiosamente, el botón de búsqueda aún aparece, y se puede hacer clic, aunque no debería aparecer, y está en la misma forma que la barra de búsqueda.

¿Es posible lo que intento hacer con la fundación zurb? Realmente, realmente quiero evitar tener dos formas de búsqueda diferentes ...

Cambié las variables de scss para zurb foundation por las siguientes solo como referencia

$totalColumns: 16;
$mobileTotalColumns: 8;
$columnGutter: 0;

Tengo un encabezado como ese:

<div class="row">
   <div class="three mobile-three columns"></div>
   <div id="search" class="eight mobile-eight columns">
      <div class="row">
         <div class="thirteen mobile-eight columns">
            <!-- text input for search -->
         </div>
         <div class="hide-on-phones hide-on-tablets three columns">
            <!-- Submit button for search -->
         </div>
      </div>            
   </div>
   <nav class="five mobile-five columns">
      <ul class="right">
         <li><%= link_to ''Teams'', ''#'' %></li>
         <li><%= link_to ''Records'', ''#'' %></li>
         <li><%= link_to ''Settings'', ''#'' %></li>
      </ul>
   </nav>
</div>

Gracias de antemano por cualquier consejo o sugerencia!

Answer 1

Creé un proyecto en git hub que demuestra el comportamiento deseado.

https://github.com/EdCharbeneau/foundation-ordering-stacking-help

Debe usar una combinación de columnas móviles y orden de origen más una consulta de medios para lograr lo que quería hacer.

Nota: El ejemplo usa la versión HTML / CSS, no la versión Ruby / SASS. Pero eso no afecta cómo funciona el código.