Bootstrap Responsiveness - Grid Issues

Question

Hi, I’m developing a site and I need to fix this piece to stay this way on mobile

But if I make a change to make it good in low resolutions, it ends up ruining the larger versions. Follow the code of this piece:

<div class="row">
  <div class="col-lg-1"> </div>
  <div class="col-sm-12 col-lg-1 somos"> <img src="icon-quemsomos1.png"> </div>
  <div class="col-sm-12 col-lg-3 somos">        
    <h5>Diferencial de vendas </h5>
    <p> Trabalhamos com equipes de vendas diferenciadas por potencial de mercado, focando totalmente no pequeno varejo, com coordenadores de vendas específicos para este segmento. Contamos com uma equipe de promotores de vendas, que auxiliam nossos clientes na reposição e layout dos produtos nas gondolas.</p>
  </div>
  <div class="col-sm-1 col-lg-2"> </div>
  <div class="col-sm-12 col-lg-1 somos"> <img src="icon-quemsomos2.png"> </div>
  <div class="col-sm-12 col-lg-3 somos">
    <h5>Entrega </h5>
    <p> Contamos com uma ampla frota de caminhões, o que nos permite trabalhar baseados em uma logística ágil e eficiente, atendendo com qualidade e rapidez as necessidades do mercado. </p>
  </div>
  <div class="col-lg-1"> </div>
</div>

How it looks in col-lg

Answer 1

What you did wrong was when dividing the columns into the classes:

In the div containing the img place col-sm-12 col-lg-3 and in the div containing the text place col-sm-12 col-lg-9.

This way when it’s the version mobile(Sm) the image will occupy your entire column and the text will be below. In the version large the image will occupy 3 columns and the text 9 columns.

It is also recommended to put the class to version averages with col-md.

img{max-width: 100px;}        // só para o exemplo aqui

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="container">
  <div row>
    <div class="col-sm-12 col-md-6 col-lg-6">
      <div class="row">
        <div class="col-sm-12 col-md-3 col-lg-3 somos">
          <img src="https://d26lpennugtm8s.cloudfront.net/assets/blog_es/ideia.jpg">
        </div>
        <div class="col-sm-12 col-md-9 col-lg-9 somos">      
          <h5>Diferencial de vendas </h5>
          <p> Trabalhamos com equipes de vendas diferenciadas por potencial de mercado, focando totalmente no pequeno
                  varejo, com coordenadores de vendas específicos para este segmento. Contamos com uma equipe de promotores de
                  vendas, que auxiliam nossos clientes na reposição e layout dos produtos nas gondolas.</p>
        </div>
      </div>
    </div>
    <div class="col-sm-12 col-md-6 col-lg-6">
      <div class="row">
        <div class="col-sm-12 col-md-3 col-lg-3 somos"> 
          <img src="https://d26lpennugtm8s.cloudfront.net/assets/blog_es/ideia.jpg">
        </div>
        <div class="col-sm-12 col-md-9 col-lg-9 somos">
          <h5>Entrega </h5>
          <p> Contamos com uma ampla frota de caminhões, o que nos permite trabalhar baseados em uma logística
                  ágil e eficiente, atendendo com qualidade e rapidez as necessidades do mercado. </p>
        </div>
      </div>
    </div>
  </div>
</div>