Una manera de conseguir esto sería cambiando un poco el HTML y usando FlexBox (para maquetar los elementos) y media queries (para detectar cuando estás en móvil y debe reorganizarse el contenido).
- Pon todos los elementos como descendientes del mismo padre
- Ponle
display: flex
y flex-direction: column
al contenedor para que los elementos estén en vertical.
- Con media queries detecta añade un
order
para que se reordenen los elementos dependiendo del tamaño de pantalla (en el ejemplo de abajo he puesto 450px, pero puedes cambiarlo al valor que quieras).
Aquí puedes ver un ejemplo funcionando (dale a "Página completa" y cambia el tamaño de página para verlo):
.row {
display: flex;
flex-wrap: wrap;
}
.column1 {
width: 80%;
}
.column2 {
width: 20%;
}
@media all and (max-width: 450px) {
.row {
flex-direction: column;
}
.row .column1 {
width: 100%;
order: 1;
}
.row .column2 {
width: 100%;
order: 2;
}
}
<div class="row">
<div class="column1">
Texto 1
</div>
<div class="column2">
<input type="checkbox" />
</div>
<div class="column1">
Text 2
</div>
<div class="column2">
<button>Aceptar</button>
</div>
</div>
En ventanas con un ancho de más de 450px (especificado por la media query), los elementos se ven así:
Mientras que si la pantalla es de como máximo 450px, se verán de este otro modo: