Skip to main content
inclui novas instruções
Fonte Link
hugocsl
  • 66,9mil
  • 17
  • 88
  • 166

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);

inserir a descrição da imagem aquiinserir a descrição da imagem aqui

.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 -->

Vc pode fazer usando flex e um @media para determinar que em telas menores de 500px por exempl. o conteúdo vai ficar dentro de um box em column, e se for maior que 500px o box fica em row

inserir a descrição da imagem aqui

.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:500px) {
  .box {
    flex-direction: row;
  }
}
  <!-- 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>

Vc pode fazer usando flex e um @media para determinar que em telas menores de 850px por exemplo o conteúdo vai ficar dentro de um box em column, e se for maior que 850px 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);

inserir a descrição da imagem aqui

.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:850px) {
  .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 -->
adicionou 33 caracteres ao conteúdo
Fonte Link
hugocsl
  • 66,9mil
  • 17
  • 88
  • 166

Vc pode fazer usando flex e um @media para determinar que em telas menores de 500px por exemploexempl. o conteúdo vai ficar dentro de um box em column, e se for maior que 500px o box fica em row

inserir a descrição da imagem aqui

.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:500px) {
  .box {
    flex-direction: row;
  }
}
  <!-- 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>

Vc pode fazer usando flex e um @media para determinar que em telas menores de 500px por exemplo o conteúdo vai ficar em column, e se for maior fica em row

inserir a descrição da imagem aqui

.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:500px) {
  .box {
    flex-direction: row;
  }
}
  <!-- 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>

Vc pode fazer usando flex e um @media para determinar que em telas menores de 500px por exempl. o conteúdo vai ficar dentro de um box em column, e se for maior que 500px o box fica em row

inserir a descrição da imagem aqui

.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:500px) {
  .box {
    flex-direction: row;
  }
}
  <!-- 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>

Fonte Link
hugocsl
  • 66,9mil
  • 17
  • 88
  • 166

Vc pode fazer usando flex e um @media para determinar que em telas menores de 500px por exemplo o conteúdo vai ficar em column, e se for maior fica em row

inserir a descrição da imagem aqui

.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:500px) {
  .box {
    flex-direction: row;
  }
}
  <!-- 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>