Você pode usar o flexbox para fazer o que deseja. Basicamente, criamos um layout com duas linhas (row
s) e dentro delas colocamos os nossos blocos.
Para que os blocos quebrem conforme o tamanho da tela do usuário diminua, basta aplicar um flex-wrap: wrap
nas row
s, que estão como display: flex
para que o layout se ajuste.
No caso, vamos aplicar a propriedade em questão dentro de um media query, já que só queremos que o efeito seja aplicado quando a tela tiver tamanho igual ou inferior a 500px
.
Algo assim:
* {
box-sizing: border-box;
}
section {
margin: 10px;
padding: 15px;
border: dashed 1px #000;
}
.row {
display: flex;
}
.main-photo {
width: 70%;
}
.form {
width: 30%;
}
.photo-1,
.photo-2 {
width: 50%;
}
/**
* Todas as regras especificadas dentro da media query a seguir serão aplicadas
* para dispositivos de tela menor ou igual a 500px.
*/
@media screen and (max-width: 500px) {
.row {
flex-wrap: wrap;
}
.main-photo,
.form,
.photo-1,
.photo-2 {
width: 100%;
}
}
<main class="main">
<div class="row">
<section class="main-photo">Foto Principal</section>
<section class="form">Formulário</section>
</div>
<div class="row">
<section class="photo-1">Foto 1</section>
<section class="photo-2">Foto 2</section>
</div>
</main>
Para testar o exemplo acima, clique em Executar, depois em Página Toda e vá diminuindo o tamanho da janela até alcançar 499
pixels ou menos.
Flexbox pode parecer complicado, mas é bem simples. Você só terá que estudar um pouco as suas propriedades. Recomendo alguns guias: