ブートストラップでの列の整列

Question

下の図に示すように、最初の行に3つのイメージを配置し、2番目の行に2つのイメージを配置する必要があります。 次のように上記画像のための私のコードは、

<div class="row" style="margin-left:15%"> 
     <div class="col-xs-6 col-md-3"> 
      <a href="#" class="thumbnail"> 
       <img src="F:\Project P\img\logo_homework.png" alt="Engg"> 
      </a> 
      <p style="text-align:center">I'm a Graduate</p> 
     </div> 
     <div class="col-xs-6 col-md-3"> 
      <a href="#" class="thumbnail"> 
       <img src="F:\Project P\img\logo_homework.png" alt="Engg"> 
      </a> 
      <p style="text-align:center">I'm a Post Graduate</p> 
     </div> 
     <div class="col-xs-6 col-md-3"> 
      <a href="#" class="thumbnail"> 
       <img src="F:\Project P\img\logo_homework.png" alt="Engg"> 
      </a> 
      <p style="text-align:center">I'm a PhD Guy</p> 
     </div> 
    </div> 
    <br> 
    <div class="row" style="margin-left:20%"> 
     <div class="col-xs-6 col-md-3" style="margin-left:20%"> 
      <a href="#" class="thumbnail"> 
       <img src="F:\Project P\img\logo_homework.png" alt="Engg"> 
      </a> 
      <p style="text-align:center">I'm a Course taking one</p> 
     </div> 
     <div class="col-xs-6 col-md-3"> 
      <a href="#" class="thumbnail"> 
       <img src="F:\Project P\img\logo_homework.png" alt="Engg"> 
      </a> 
      <p style="text-align:center">Others</p> 
     </div> 
    </div> 

ある

しかし、私はクロムを使用して、モバイルモードで表示素子を検査それとして

下に表示されるI私は余分なdivを配置したことを知っているが、もし私がdivを配置しない場合、4番目の画像は最初の行に配置されます。

どのように整列させることができますか？

Answer 1

多分これを試してみてください。

https://jsfiddle.net/68kycb4g/

<div class="container"> 
<div class="row"> 
    <div class="col-xs-4"></div> 
    <div class="col-xs-4"></div> 
    <div class="col-xs-4"></div> 
</div> 
<div class="row"> 
    <div class="col-xs-6 col-sm-offset-1 col-sm-5"></div> 
    <div class="col-xs-6 col-sm-5"></div> 
</div>