Bootstrap Responsiveness - Problems with Grid

Navigation
0

Hello, I am developing a website and I need to fix this piece so that it stays that way in the mobile
ButifImakeachangetogetgoodatlowresolutions,itendsupspoilingthelargerversions.Hereisthecodeforthispiece:

<divclass="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 do you find it in col-lg?

    
asked by anonymous 08.09.2018 / 06:55

1 answer

1

What you did wrong was when dividing columns into classes:

  

In the div that contains the img col-sm-12 col-lg-3 and the div put col-sm-12 col-lg-9 .

     

So when it's the mobile (sm) version the image will take up your entire column and the text will be down. In the large version the image will occupy 3 columns and the text 9 columns.

     

It is also recommended that you place the class for medium version 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><divclass="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><divclass="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>
    
08.09.2018 / 19:09
Touch effect / click and drag with mouse Problem with Get in jquery