Doubt with Responsive bootstrap layout

Question

I have a layout that I would like to leave in the following template.

To make it responsive I’m not able to add the column (1) higher.

As it is now http://comajudacoletiva.com.br/estudo/

  <div class="container">

  <div class="row">

     <!--
        <div class="col-sm-3 col-md-3">
            <img id="principal" src="exemplo/principal.png" class="img-responsive" >
        </div>
      -->
      
   <!--primiera linha-->
    <div class="row">
        <div class="col-sm-3 col-md-3">
            <img id="img01" src="exemplo/imagem01.png" class="img-responsive" >
        </div>
        <div class="col-sm-3 col-md-3">
            <img id="img01" src="exemplo/imagem02.png" class="img-responsive" >
         </div>
        <div class="col-sm-3 col-md-3">
            <img id="img01" src="exemplo/imagem03.png" class="img-responsive">
         </div>
    </div>
   <!-- fim primiera linha-->
    
    <!--segunda linha-->
    <div class="row">
        <div class="col-sm-3 col-md-3">
            <img id="img01" src="exemplo/imagem01.png" class="img-responsive" >
        </div>
        <div class="col-sm-3 col-md-3">
            <img id="img01" src="exemplo/imagem02.png" class="img-responsive" >
         </div>
        <div class="col-sm-3 col-md-3">
            <img id="img01" src="exemplo/imagem03.png" class="img-responsive">
         </div>
    </div>
   <!--fim segunda linha-->  


    
    <!--terceira linha -->  
    <div class="row">
        <div class="col-sm-3 col-md-3">
            <img id="img01" src="exemplo/imagem01.png" class="img-responsive" >
        </div>
        <div class="col-sm-3 col-md-3">
            <img id="img01" src="exemplo/imagem02.png" class="img-responsive" >
         </div>
        <div class="col-sm-3 col-md-3">
            <img id="img01" src="exemplo/imagem03.png" class="img-responsive">
         </div>
    </div>
    <!--fim terceira linha--> 

  </div>

  <!--fim do conteiner-->
 </div>  

Answer 1

Hello, I will help you to understand a little more of this system.

To get this division you’ll have to split twice. I realized that the initial block would be four, correct?

Being 1/4, 1/4, 1/4, and 1/4.

The correct way is: 1º - Divide the total width into 4, and the second with the rest. 2º - Divide the second column into three to place the smaller squares.

Example below:

<div class="container" style="padding-top: 10px;">
        <!-- Divisão em 1/4 -->
        <div class="col-sm-12 col-md-3">
            <div style="background: #e0e0e0; margin: 10px; height: 400px;"></div>
        </div>

        <!-- Divisão com o resto -->
        <div class="col-sm-12 col-md-9 quadradinhos">
            <div class="col-sm-12 col-md-3"> Conteúdo</div>
            <div class="col-sm-12 col-md-3"> Conteúdo</div>
            <div class="col-sm-12 col-md-3"> Conteúdo</div>

            <div class="col-sm-12 col-md-3"> Conteúdo</div>
            <div class="col-sm-12 col-md-3"> Conteúdo</div>
            <div class="col-sm-12 col-md-3"> Conteúdo</div>

            <div class="col-sm-12 col-md-3"> Conteúdo</div>
            <div class="col-sm-12 col-md-3"> Conteúdo</div>
            <div class="col-sm-12 col-md-3"> Conteúdo</div>
        </div>

    </div>