Bootstrap-Gitter auf Tablettbildschirm anwenden

Question

Ich arbeite an einem kleinen Webprojekt und möchte drei Navigationsbilder mit Bootstrap-Klassen auf einem Tablettbildschirm anzeigen. Mein erstes Navigationsbild muss zuerst in voller Breite angezeigt werden und die anderen beiden Navigationsbilder werden unter dem ersten nebeneinander angezeigt. Es funktioniert gut auf mittleren und großen Bildschirm. Hilfe benötigen. Unten ist mein Code und die Bilder des zu erzielenden Ergebnisses.

Image on medium and Large screen.Image on Tablet screen. Es muss auf dem Smartphone-Bildschirm gestapelt werden.

<div class="row"> 
    <nav class="col-md-8 col-sm-12" id="left"> 
     <a href="#"><img src="" alt=""></a> 
    </nav> 
    <nav class="col-md-4 col-sm-12"> 
    <div class="row"> 
     <nav class="col-md-2 col-sm-6" id="side1"> 
      <a href="#"><img src="" alt=""></a> 
     </nav> 
     <nav class="col-md-2 col-sm-6" id="side2"> 
      <a href="#"><img src="" alt=""></a> 
     </nav>  
    </div> 
    </nav> 
    </div> 

Answer 1

Versuchen Sie Folgendes:

<div class="container-fluid"> 
    <div class="row"> 
    <nav class="col-md-8 col-sm-12" id="left" style="background-color:red; height:100px;">   
    </nav> 
    <nav class="col-md-4 col-sm-12"> 
     <div class="row"> 
     <nav class="col-md-6 col-sm-6" id="side1" style="background-color:pink; height:100px;"> 
     </nav> 
     <nav class="col-md-6 col-sm-6" id="side2" style="background-color:tan; height:100px;">   
     </nav>  
     </div> 
    </nav> 
    </div>  
</div> 

Achten Sie darauf, col-md-6 anstelle von col-MD-2 in der zweiten Reihe