thank you for the help, especially @ZiadDarwich, for the help.
By following his instructions and changing the bootstrap link to https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css and adding col to the first 2 divs, it worked. My css became like this:

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

  .row .row-carac{
  display: flex; /* repare aqui */
  flex-direction: column; /* repare aqui */
  text-align: justify;
  margin: 4px 0 4px 0;
  max-width:95%;
  }

  .caracteristicas{
  border: 1px solid grey;
  margin: 3px 0 3px 0;  
  height:auto;
  }

  .img-div {
     height: auto !important;
     float:left;
     position: relative;
     overflow: hidden;
     width: 22%;
     margin: 4px 10px;
  }   
  }

The html text ended like:

<div class="container-fluid">
<div class="row row-carac">
  <div class="col col-xs-6 col-md-4 caracteristicas">
     <strong>Fluido R410-A</strong> <img class="img-div" title="gas r410 A" src="{{media url="wysiwyg/R4.png"}}" alt="r410a" />
     <p><span style="font-size: small;">Refrigerante ecol&oacute;gico n&atilde;o inflam&aacute;vel, at&oacute;xico e menos nocivo &agrave; camada de oz&ocirc;nio.</span></p>
  </div>
  <div class="col col-xs-6 col-md-4 caracteristicas ">
     <strong>Fun&ccedil;&atilde;o turbo</strong> <img class="img-div" title="Fun&ccedil;&atilde;o turbo" src="{{media url="wysiwyg/TURBO.png"}}" alt="turbo" />
     <p><span style="font-size: small;">Opera&ccedil;&atilde;o do compressor em maior pot&ecirc;ncia garante um desempenho de refrigera&ccedil;&atilde;o superior.</span></p>
  </div>
  <div class="clearfix visible-xs-block"></div>
  <div class="col-xs-auto col-md-4 caracteristicas">
     <strong>Fun&ccedil;&atilde;o Sleep</strong> <img class="img-div" title="fun&ccedil;&atilde;o sleep" src="{{media url="wysiwyg/SLEEP.png"}}" alt="sleep" />
     <p><span style="font-size: small;">Ajusta a temperatura e ru&iacute;do automaticamente durante a noite por at&eacute; 7 horas.&nbsp;</span></p>
  </div>
</div>
</div>

Thank you very much, see you guys next time.

I’m stuck with CSS config. I have the following <div>:

@media only screen and (max-width: 900px) { 
    .caracteristicas{
      display: flex; /* repare aqui */
      flex-direction: column; /* repare aqui */
      text-align: justify;
       border: 1px solid grey;
      margin 2px;
      height:auto;
	  }
        
    .img-div {
       height: auto !important;
       float:left;
       position: relative;
       overflow: hidden;
       width: 20%;
       margin: 3px 10px;
    }   
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">
<div class="container-fluid">
      <div class="row row-carac">
         <div class="col-xs-6 col-md-4 caracteristicas">
            <strong>Fluido R410-A</strong>
            <img class="img-div" title="gas r410 A" src="{{media url="wysiwyg/R4.png"}}" alt="r410a" />
            <p>Gás &nbsp;N&atilde;o inflam&aacute;vel, at&oacute;xico e menos nocivo &agrave; camada de oz&ocirc;nio.</p>
         </div>
        <div class="col-xs-6 col-md-4 caracteristicas">
            <strong>Fun&ccedil;&atilde;o turbo</strong>
            <img class="img-div" title="Fun&ccedil;&atilde;o turbo" src="{{media url="wysiwyg/TURBO.png"}}" alt="turbo" />
            <p>Operação em maior potência garante um desempenho de refrigera&ccedil;&atilde;o &eacute; superior.</p>
         </div>
		 <div class="clearfix visible-xs-block"></div>
        <div class="col-xs-auto col-md-4 caracteristicas">
            <strong>Fun&ccedil;&atilde;o Sleep</strong>
            <img class="img-div" title="fun&ccedil;&atilde;o sleep" src="{{media url="wysiwyg/SLEEP.png"}}" alt="sleep" />
            <p>&nbsp;Ajusta A temperatura automaticamente durante a noite por at&eacute; 7 horas.&nbsp;</p>
         </div>
      </div>
</div>

This CSS is for display on mobile. I need <div>s to be aligned on mobile and have the same height. Currently each <div> height changes according to text:

I need it to look like this, but with no fixed height and with some space between the boxes:

Any tips?