携帯電話のブートストラップの注文

Question

こんにちは皆と「幸せな」イースター。

私は自分のブートストラップを設定しています。私がコンピュータ画面とipadを持っているとき、レイアウトはうまくいきます。しかし、私はモバイルサイズに最小化すると、 '左のパネル'が最初に表示されます。私は「右サイドパネル」の下で行ってみたい

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はラージ・ディスプレイ用です。