Vc pode fazer usando flex e um @media
para determinar que em telas menores de 500px850px
por exempl.exemplo o conteúdo vai ficar dentro de um box em column
, e se for maior que 500px850px o box fica em row
. E nesse regra dentro do @media
vc decide quantas colunas vc quer são 3 como fiz width: calc(100% / 3);
ou se quiser duas vc troca o 3 por 2 aqui width: calc(100% / 2);
.conteudo {
display: flex;
flex-wrap: wrap;
}
.box {
box-sizing: border-box;
padding: 10px;
width: 100%;
display: flex;
flex-direction: column;
}
.box img {
width: 100px;
height: 100px;
}
@media screen and (min-width:500px850px) {
.box {
flex-direction: row;
width: calc(100% / 3);
}
}
<!-- CONTEÚDO -->
<main class="Estilo bgGray linha">
<article class="conteudo bgWhite">
<section class="box">
<img src="https://placecage.com/100/100">
<div class="text-center">
<h3><strong>DESENVOLVIMENTO</strong></h3>
<p class="h5">Planejamento, Criação e Desenvolvimento de Soluções WEB para o seu Negócio...</p>
</div>
</section>
<br>
<section class="box">
<img src="https://placecage.com/100/100">
<div class="text-center">
<h3><strong>ASSISTÊNCIA TÉCNICA</strong></h3>
<p class="h5">Montagem e Manutenção de Computadores, Notebooks e Impressoras...</p>
</div>
</section>
<br>
<section class="box">
<img src="https://placecage.com/100/100">
<div class="text-center">
<h3><strong>SISTEMAS CFTV</strong></h3>
<p class="h5">Você já ouviu falar que prevenir é melhor que remediar? Quando tratamos de segurança patrimonial,
essa regra é indispensável. Por isso, o Sistema de CFTV (Circuito Fechado de Televisão) é um aliado tão
importante no seu projeto de proteção...</p>
</div>
</section>
</article>
</main>
<!-- FIM DO CONTEÚDO -->