спасибо за помощь, особенно @ZiadDarwich, за помощь. Следуя его инструкциям и изменив ссылку bootstrap на https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css и добавив col к первым 2 div, это сработало. Мой css стал таким:
@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;
}
}
Текст html закончился как:
<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ógico não inflamável, atóxico e menos nocivo à camada de ozônio.</span></p>
</div>
<div class="col col-xs-6 col-md-4 caracteristicas ">
<strong>Função turbo</strong> <img class="img-div" title="Função turbo" src="{{media url="wysiwyg/TURBO.png"}}" alt="turbo" />
<p><span style="font-size: small;">Operação do compressor em maior potência garante um desempenho de refrigeração superior.</span></p>
</div>
<div class="clearfix visible-xs-block"></div>
<div class="col-xs-auto col-md-4 caracteristicas">
<strong>Função Sleep</strong> <img class="img-div" title="função sleep" src="{{media url="wysiwyg/SLEEP.png"}}" alt="sleep" />
<p><span style="font-size: small;">Ajusta a temperatura e ruído automaticamente durante a noite por até 7 horas. </span></p>
</div>
</div>
</div>
Большое спасибо, увидимся в следующий раз.