how to align 6 Articles elements in two rows?

Question

I’m making a responsive Mobile Fist site, and in media query I’m trying to align the two-row Articles are 6 Articles, right below will be the codes:

/* SERVIÇOS*/
.servicos {width: 100%;  text-align: left; padding: 3% 4%;}
.servico {width: 100%; background-color: #fff; text-align: left; border-radius: 0 0 7px 7px; margin-bottom: 3%;}
.servico img {border-radius: 7px 7px 0 0; margin-left: 18%;}
.descriçao {padding: 7%;}
.descriçao a {font-size: 1.5em; color: #130400; font-weight: 700; }
.descriçao h4 {font-size: 1.2em; color: #130400; margin-top: 2%; }
.descriçao p {margin-top: 6%; color: #130400; line-height: 1.5em;}



/* SMALL DEVICE - TABLETS */
@media screen and (min-width: 768px;)  {


}

<main class="servicos">
     <article class="servico">
         <a href="#"><img src="img/comprasdeeuipamento.jpg" alt="Campanhas publicitárias"></a>
     <div class="descriçao">
     	<a href="#">Treinamento Completo</a>
     	 <h4>Nos damos um treinamento completo com tudo necessário para abrir uma gelateria</h4>
     	 <p>também ajudamos a achar preços é marcas ideais para comprar equipamentos.</p>
     </div>
     </article>
     <article class="servico">
         <a href="#"><img src="img/comprasdeeuipamento.jpg" alt="Campanhas publicitárias"></a>
     <div class="descriçao">
      <a href="#">Treinamento Completo</a>
       <h4>Nos damos um treinamento completo com tudo necessário para abrir uma gelateria</h4>
       <p>também ajudamos a achar preços é marcas ideais para comprar equipamentos.</p>
     </div>
     </article>
     <article class="servico">
         <a href="#"><img src="img/comprasdeeuipamento.jpg" alt="Campanhas publicitárias"></a>
     <div class="descriçao">
      <a href="#">Treinamento Completo</a>
       <h4>Nos damos um treinamento completo com tudo necessário para abrir uma gelateria</h4>
       <p>também ajudamos a achar preços é marcas ideais para comprar equipamentos.</p>
     </div>
     </article>
     <article class="servico ser2">
         <a href="#"><img src="img/comprasdeeuipamento.jpg" alt="Campanhas publicitárias"></a>
     <div class="descriçao">
      <a href="#">Treinamento Completo</a>
       <h4>Nos damos um treinamento completo com tudo necessário para abrir uma gelateria</h4>
       <p>também ajudamos a achar preços é marcas ideais para comprar equipamentos.</p>
     </div>
     </article>
     <article class="servico ser2">
         <a href="#"><img src="img/comprasdeeuipamento.jpg" alt="Campanhas publicitárias"></a>
     <div class="descriçao">
      <a href="#">Treinamento Completo</a>
       <h4>Nos damos um treinamento completo com tudo necessário para abrir uma gelateria</h4>
       <p>também ajudamos a achar preços é marcas ideais para comprar equipamentos.</p>
     </div>
     </article>
     <article class="servico ser2">
         <a href="#"><img src="img/comprasdeeuipamento.jpg" alt="Campanhas publicitárias"></a>
     <div class="descriçao">
      <a href="#">Treinamento Completo</a>
       <h4>Nos damos um treinamento completo com tudo necessário para abrir uma gelateria</h4>
       <p>também ajudamos a achar preços é marcas ideais para comprar equipamentos.</p>
     </div>
     </article>

Answer 1

You can do this by making the size of the elements child either 50% from a certain point using media queries, or you can do this already by implementing directly into the element by giving a width:50%; and a max-width:; to define a size limit that we want them to have, which in this case will be the desired size that we want articles to have in environments desktop, or larger screen sizes. Here’s an example below:

/* Shenanigans para dar padding */
.servicos * {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.servico {
    width: 50%;
    max-width: 300px; /* adiciona tamanho máximo dos elementos */
    display: inline-block;
    margin-right: -4px; /* fix para o inline-block */
    background-color: rgba(142, 158, 196, 0.45);
    padding: 3px;
    background-clip: content-box; /* Especifica area pintada do background (box-sizing)*/
}
.servico h4 b {
    background-color: yellow;
    padding: 0px 5px;
}

<div class="servicos">
    <div class="servico">
    <h4>Que Título Fantástico!<b>1</b></h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eget felis libero..</p>
    </div>
    <div class="servico">
        <h4>Que Título Fantástico!<b>2</b></h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eget felis libero..</p>
    </div>
    <div class="servico">
        <h4>Que Título Fantástico!<b>3</b></h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eget felis libero..</p>
    </div>
    <div class="servico">
        <h4>Que Título Fantástico!<b>4</b></h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eget felis libero..</p>
    </div>
    <div class="servico">
        <h4>Que Título Fantástico!<b>5</b></h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eget felis libero..</p>
    </div>
    <div class="servico">
        <h4>Que Título Fantástico!<b>6</b></h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eget felis libero..</p>
    </div>
</div>

Or you can do it using Multiple Columns, as in this example in jsFiddle, but that changes the order of how the elements are presented. Instead of being horizontally, the count becomes vertically as you can see in the link to that same example.