Tienes que ir trabajando con los Media Queries donde indiques según la resolución la posición de tus elementos ejemplo:
.container{
border:1px solid red;
height: 800px;
position: relative;
width: 100%;
}
.wrapper_cuadros{
align-items: center;
display: flex;
position: absolute;
height: 100%;
vertical-align: middle;
width: 100%;
}
.cuadro1,
.cuadro2,
.cuadro3,
.cuadro4{
border:1px solid blue;
height: 50px;
line-height: 50px;
position:absolute;
text-align:center;
transition: all .3s;
width: 50px;
}
.cuadro1{
left:0px;
top:0px;
}
.cuadro2{
right:0px;
top:0px;
}
.cuadro3{
bottom: 0px;
left:0px;
}
.cuadro4{
bottom: 0px;
right:0px;
}
.cuadro5{
border:1px solid blue;
height: 50px;
line-height: 50px;
margin: auto;
text-align:center;
width: 50px;
}
@media (max-width: 1000px) {
.cuadro1{
border:1px solid green;
left:50px;
top:50px;
}
.cuadro2{
border:1px solid yellow;
right:50px;
top:50px;
}
.cuadro3{
border:1px solid orange;
bottom: 50px;
left:50px;
}
.cuadro4{
border:1px solid black;
bottom: 50px;
right:50px;
}
}
@media (max-width: 800px) {
.cuadro1{
border:1px solid green;
left:20px;
top:20px;
}
.cuadro2{
border:1px solid yellow;
right:20px;
top:20px;
}
.cuadro3{
border:1px solid orange;
bottom: 20px;
left:20px;
}
.cuadro4{
border:1px solid black;
bottom: 20px;
right:20px;
}
}
<div class="container">
<div class="wrapper_cuadros">
<div class="cuadro1">1</div>
<div class="cuadro2">2</div>
<div class="cuadro3">3</div>
<div class="cuadro4">4</div>
<div class="cuadro5">5</div>
</div>
</div>
Como veras coloque dos Media Queries para que fueran cambiando de posición y color, cuando ejecutes este código en la parte inferior derecha tienes la opción de verlo pantalla completa y trata luego de ir reduciendo el ancho de la venta ay veras como funciona.
Puedes customizar los Media Queries para lo que quieras ejemplo:
/* En pantallas con 992px o menos, configure el color de fondo en azul */
@media screen and (max-width: 992px) {
body {
background-color: blue;
}
}
/* En pantallas de 600 px o menos, configure el color de fondo a verde oliva */
@media screen and (max-width: 600px) {
body {
background-color: olive;
}
}
Los Media Queries se pueden utilizar para verificar muchas cosas, como:
- ancho y alto de la ventana
- ancho y alto del dispositivo
- orientación (¿la tableta / teléfono está en modo horizontal o vertical?)
- resolución
Espero que sea lo que estas buscando.