Exitem várias formas de fazer. Aqui tem um exemplo simples com Flexbox
.
Esse modelo funciona assim, usando o media query @media
quando a tela for maior que 660px
com o flex-basis
eu determino que a coluna da direita vai ter 70%
e a da direita 30%
, Quando a tela for menor que 660px
cada coluna fica com 100%
de flex-basis
, dessa forma cada coluna ocupa uma linha inteira.
Código com o resultado da imagem acima:
OBS: Exiba em "Página toda" para ver melhor como fica responsivo. Caso quei ajustar a largura das colunas basta ajustar proporcionalmente os 70% e 30% sempre somando no máximo 100%, Ex: 75%, 25%
* {
box-sizing: border-box;
}
.container {
display: flex;
flex-wrap: wrap;
}
.esq {
flex-basis: 70%;
background-image: radial-gradient(transparent, rgba(0,0,0,0.9)), url(https://unsplash.it/360/200);
background-size: cover;
}
.dir {
flex-basis: 30%;
background-color: aliceblue;
}
@media screen and (max-width: 660px) {
.container > div {
flex-basis: 100%;
}
}
<div class="container">
<div class="esq">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione, sed?
</div>
<div class="dir">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione, sed?
</div>
</div>
DICA: a título de curiosidade mesmo
Nesse caso em especifico vc tb pode usar a técnica conhecida como Flex-grow 9999 Hack com ela vc consegue fazer as colunas quebrarem sem precisar de media query! Aqui vc pode ler mais sobre isso: https://joren.co/flex-grow-9999-hack/
Veja o código usado para ter o resultado da imagem acima:
.container {
display: flex;
flex-wrap: wrap;
}
.cell {
display: flex;
align-items: center;
height: 100px;
}
.first {
flex-grow: 1;
background-color: lightgreen;
flex-basis: 70%;
min-width: 320px;
}
.second {
flex-grow: 9999;
flex-basis: 30%;
background-color: lightblue;
}
<div class="container">
<div class="cell first">
Cell 1
</div>
<div class="cell second">
Cell 2
</div>
</div>