Se reajustando a larguras menores

Hora de continuar nossa pequena "aula" sobre a importância da porcentagem no design responsivo. Caso queira entender um pouco do que estou falando antes de continuar, você pode entender num antigo post clicando aqui.
Bem, sem mais delongas, vamos ao código:

HTML:
<section class='colunas'>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus placerat sagittis velit et vestibulum. Fusce semper diam ligula, ac consequat purus accumsan quis. Aliquam sed tristique lorem, at viverra nunc.
</div>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus placerat sagittis velit et vestibulum. Fusce semper diam ligula, ac consequat purus accumsan quis. Aliquam sed tristique lorem, at viverra nunc.
</div>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus placerat sagittis velit et vestibulum. Fusce semper diam ligula, ac consequat purus accumsan quis. Aliquam sed tristique lorem, at viverra nunc.
</div>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus placerat sagittis velit et vestibulum. Fusce semper diam ligula, ac consequat purus accumsan quis. Aliquam sed tristique lorem, at viverra nunc.
</div>

</section>

CSS:
div {
border: 1px solid #000000;
margin-bottom: 2px;
}

.colunas div {
width: 24%;
display: inline-block;

}

Quando abrimos nos navegadores temos os seguintes resultados:

Tudo bem no desktop, ainda aceitável num celular segurado na horizontal e péssimo se virarmos ele na vertical.
Para corrigir isso, podemos fazer uso do nosso conhecimento de media queries (neste link) e a ideia de porcentagem pra deixar o site mais bonito. Vamos ver o código abaixo:

.colunas div {
width: 24%;
display: inline-block;
}

@media screen and (max-width: 640px) {
.colunas div {
width: 49%;
}
}

@media screen and (max-width: 360px) {
.colunas div {
width: 100%;
}
}

Vamos ver como isso fica ao ser aberto:

Aproveitamos melhor o espaço, e o nosso site não fica mais desalinhado independente de como e onde abrimos. Também podemos fazer com que nos celulares e tablets os blocos ocupem 100% da largura independente da posição em que eles fiquem da seguinte forma:

div {
border: 1px solid #000000;
margin-bottom: 2px;
}

.colunas div {
width: 24%;
display: inline-block;
}

@media screen and (max-width: 640px) {
.colunas div {
width: 100%;
}
}

E como resultado temos:

Qual dos dois fica melhor? Não dá para afirmar, depende do conteúdo geral do site, e como as informações em cada bloco precisam ser mostradas, mas quisemos apresentar aqui formas de como deixar o conteúdo mais harmonioso. Podemos dividir os blocos em uma coluna, duas, três, tudo depende de como usamos isso para uma melhor apresentação do nosso conteúdo.