закачка бутстрапа на мобильном экране

Question

Приветствуем всех и счастливых Пасхи.

Я настраиваю свой бутстрап. Макет прекрасно, когда я на экране компьютера и ipad. Но когда я сворачиваю до размера мобильного телефона, появляется «левая панель». Я хотел бы, чтобы идти под «правильным» Sidepanel

fiddle

ли кто-нибудь знает, как я могу это сделать?

<?php 
if(!isset($_SESSION)) session_start(); 
?> 
<?php include dirname(dirname(__DIR__)).'/resources/includes/header.html'; ?> 

<div class="row" style="border: 2px solid blue; height: 100vh;"> 
    <div class="col-md-2" style="border: 2px solid red; height: 100%;"> 
     Left Sidenpanel 

    </div> 
    <div class="col-md-8" style="border: 2px solid red;height: 100%;"> 
     Left Sidepanel button 
     <div class="row" style="border: 2px solid green;height: 20vh;"> 
      <div class="col-md-12"> 
      Insert 
      </div>  
     </div> 
     <div class="row" style="border: 2px solid green;height: 60vh;"> 
      <div class="col-md-12"> 
       <div class="row" style="border: 2px solid green"> 
        <div class="col-md-1" style="border: 2px solid purple; height: 100%;"> 
         Latest 
        </div>      
        <div class="col-md-8" style="border: 2px solid purple;height: 100%;"> 
         Some Content 
        </div> 
        <div class="col-md-1" style="border: 2px solid purple; height: 100%;"> 
         Right 1 
        </div> 
        <div class="col-md-1" style="border: 2px solid purple; height: 100%;"> 
         Right 2 
        </div> 
        <div class="col-md-1" style="border: 2px solid purple; height: 100%;"> 
         Right 3 
        </div>       
       </div> 
      </div>  
     </div> 
     <div class="row" style="border: 2px solid black;height: 15vh;"> 
      <div class="col-md-12"> 
       <div class="col-md-3" style="border: 2px solid purple; height: 100%;"> 
        1 
       </div> 
       <div class="col-md-3" style="border: 2px solid purple; height: 100%;"> 
        2 
       </div> 
       <div class="col-md-3" style="border: 2px solid purple; height: 100%;"> 
        3 
       </div> 
       <div class="col-md-3" style="border: 2px solid purple; height: 100%;"> 
        4 
       </div> 

      </div>  
     </div> 
    </div> 
    <div class="col-md-2" style="border: 2px solid red;height: 100%;"> 
     Right Sidepanel 
    </div> 
    <div class="col-md-12" style="border: 2px solid red;height: 100%;"> 
     <?php include dirname(dirname(__DIR__)).'/resources/includes/footer.html'; ?> 
    </div> 
</div> 

Answer 1

При создании своих классов добавьте «col-sm- * (позиция таблицы, которую вы хотите»). Sm для смартфона! Md для среднего дисплея, а Lg - для большого дисплея.