Place Content Article Horizontal

Question

Good morning, I would like an idea to create a css style that organizes my tag <Article> containing Img and Divs horizontal position in larger resolutions.

Follow my full code and css.

/** CONFIGURAÇÕES PADRÃO **/
* {
  margin: 0px;
  padding: 0px;
  font-size: 100%;
  border: none;
  outline: none;
  box-sizing: border-box;
}

.Personalizado{
    padding-top:0px;
}

a {
  text-decoration: none !important;
}

ul {
  list-style: none;
}

img {
  max-width: 100%;
}

.radius{
  border-radius: 5%;
}

.Estilo{
  width: 100%;
  float: left;
  padding: 3% 4%;
  text-align: center;
  margin-top: 10px;
}

.text-center .img-responsive {
    margin: 0 auto;
}

/** BACKGROUNDS **/
.bgGradient{
	background: linear-gradient(to right, #2796c3, #86dafc);
}

.bgBlack{
	background-color: #000;
}

.bgWhite{
  background-color: #FFF;
}

.bgGray{
	background-color: #e6e6e6
}

/** CABEÇALHO **/
.cabecalho{
  width: 100%;
  float: left;
  padding: 1% 2%;
  text-align: center;
  margin-top: 0px;
}

.btClose{
  font-size: 1.5em;
  color: #FFF;
  float: right;
  cursor: pointer;
  margin: 2%  3% 0 0;
}

.logo{
  width: 56px;
  height: 56px;
  float: left;
  background: url(../img/Logo-Mobile.png) center center/56px no-repeat;
}

.btMenu{
  width: 56px;
  height: 56px;
  float: right;
  border-radius: 56px;
  color: #FFF;
  cursor: pointer;
  text-align: center;
  font-size: 1.5em;
}

.menu{
  display: none;
  width: 100%;
  height: 100%;
  position: fixed;
  background-color: rgba(0, 0, 0, 0.8);
  top: 0;
  left: 0;
  z-index: 100;
}

.menu,ul{
  width: 100%;
  float: left;
  text-align: center;

}

.menu,ul,li{
  padding: 1%;  
}

.menu,ul,li,a{
  font-size: 1.5em;
  color: #FFF;
}

/** PRINCIPAL **/
.conteudo{
  width: 100%;
  text-align: center;
  margin-bottom: 3%;
}

.conteudo,img{
  border-radius: 10px 10px 0px 0px;
}

.conteudo,.textos{
  padding: 7%;
}

.conteudo,.textos,h4{
  font-size: 2em;
  color: #000;
  font-weight: bold;
  margin-top: 1%;
}

.box {
  box-sizing: border-box;
  padding: 10px;
  width: 100%;
  display: flex;
  flex-direction: column;
}
.box img {
  width: 100px;
  height: 100px;
}

/** RODAPE **/
.rodape{
	width: 100% !important;
	float: left !important;
	padding: 1% 1% !important;
	text-align: center !important;
	margin-top: 10px !important;
}

.direitos{
	color: #FFF;
	opacity: 0.7;
}

@media screen and (max-width: 850px){
  
  /** CABEÇALHO **/
  .btMenu{
    display: none !important;
  }

  .box {
    flex-direction: row;
  }

}

@media screen and (max-width: 480px){

  /** TEXTO INTERNO CAROUSEL **/
  .textCarousel{
    font-size: 1em;
  }

  @media screen and (min-width: 850px){

  }

}


  

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- CONTEÚDO -->
<main class="Estilo bgGray">

	<article class="conteudo bgWhite">

<section class="box">
		<img class="img-thumbnail img-responsive" class="center-block" src="img/principal/desenvolvimento.jpg">

		<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 class="img-thumbnail img-responsive" class="center-block" src="img/principal/manu.jpg">

		<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 class="img-thumbnail img-responsive" class="center-block" src="img/principal/CFTV.jpg">

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

Answer 1

You can do using flex and a @media to determine that on smaller screens of 850px for example the content will stay inside a box in column, and if it is larger than 850px the box is in row. And in that rule within the @media you decide how many columns you want are 3 as I did width: calc(100% / 3); or if you want two you trade the 3 for 2 here 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: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 -->