Tengo una sección en la cual uso un grid, el problema es que en computadoras se ve bien, pero en móviles, quiero que aparezca el texto arriba y los inputs abajo (no importa si el botón no aparece abajo)
Este es el código que tengo
body, html {
font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
overflow-x: hidden;
}
.grid {
display:grid;
grid-template-columns: auto auto;
}
@media screen and (max-width:980px) {
.grid {
display:block;
}
}
<form>
<div class="container" data-b="f6">
<div class="fade--1">
<div class="grid">
<div class="sec fade">
<div class="form-group complete">
<span class="fsize"><i class="fas fa-user-circle fsize"></i></span>
<input class="form-field complete" id="uname" type="text" placeholder="Enter your name" required>
</div>
<div class="form-group complete">
<span class="fsize"><i class="fas fa-envelope fsize"></i></span>
<input class="form-field complete" id="uemail" type="email" placeholder="Enter your email" required>
</div>
<div class="form-group complete">
<span class="fsize"><i class="fas fa-comment-dots fsize"></i></span>
<textarea class="form-field complete subtitle" data-resize="no" id="umsg" placeholder="Type here" required></textarea>
</div>
</div>
<div class="sec t-center">
<h2 class="title">Lorem ipsum</h2>
<p class="subtitle">Lorem ipsum....</p>
<p><br></p>
<p><input value="Send" type="submit" href="register/" class="btn-linear--2 complete"></p>
</div>
</div>
</div>
</div>
</form>
A simple vista, pareciera una solución invertir la posición de los bloques, pero no es una opción, pues tengo un bloque anterior al formulario, usando grid también, el cual va con una imagen a la derecha y texto a la izquierda, entonces si invertimos las posiciones de los bloques se va a ver "raro"
PD: Se puede usar JS si es necesario, no hay limitaciones en cuanto a eso
Lorem Ipsum
?sec t-center
arriba y el otro div abajo cuando se esté en dispositivos móviles