bloques apilados al reducir tamaño

[gteon]

Hola amigos,


Tengo un problema, estoy creando un panel para un juego en el cual tengo un bloque a la izquierda y otro a la derecha.



He creado el siguiente código, para los bloques.

Código:

.bloqueizquierdo{
  position: absolute;
  top: 3%;
  left: 1%;
  width: 400px;
  height: 20%;
  background-color: red;
  opacity: 0.5;
}

.bloquederecho {
  position: absolute;
  top: 3%;
  right: 1%;
  width: 400px;
  height: 20%;
  background-color: green;
  opacity: 0.5;
}

Y funciona pero cuando reduzco el tamaño del navegador los dos bloques se superponen y mi idea es que apilen uno encima de otro o bien se oculten para luego abrirlos con un touch icon.

Es decir que se adapten a la vista móvil.

Alguien me podría decir como puedo hacerlo, pero sin javascript solo CSS y html?

Gracias.

[Rafael]

Quita la posición absoluta y solo flotalos.

Para ocultarlos necesitarás media queries.