ソーシャルアイコンのブートストラップグリッド

Question

私は、ソーシャルアイコンのリストのために、行との関連で列を理解するのに苦労しています。今私はそれらを1つの行の表示サイズで表示させ、それらをミディアムビューサイズと1つの行に入れたいと思っています。

<div class="row"> 
      <div class="col-lg-1 col-lg-offset-3 col-md-offset-6 col-md-1"> 
       <a href=""><i class="fa fa-behance-square fa-icon"></i></a> 
      </div> 
      <div class="col-lg-1 col-md-1"> 
       <a href=""><i class="fa fa-linkedin-square fa-icon"></i></a> 
      </div> 
      <div class="col-lg-1 col-md-1"> 
       <a href=""><i class="fa fa-twitter-square fa-icon"></i></a> 
      </div> 
      <div class="col-lg-1 col-md-1"> 
       <a href=""><i class="fa fa-skype fa-icon"></i></a> 
      </div> 
      <div class="col-lg-1 col-md-1"> 
       <a href=""><i class="fa fa-facebook-square fa-icon"></i></a> 
      </div> 
      <div class="col-lg-1 col-md-1"> 
       <a href=""><i class="fa fa-github-square fa-icon"></i></a> 
      </div> 
     </div> 

Answer 1

各divの幅は約33.33パーセント（100/3）になり、モバイルデバイス（COL-XS- *）については

<div class="row"> 
    <div class="col-xs-4 col-sm-2"> 
     <a href=""><i class="fa fa-behance-square fa-icon"></i></a> 
    </div> 
    <div class="col-xs-4 col-sm-2"> 
     <a href=""><i class="fa fa-linkedin-square fa-icon"></i></a> 
    </div> 
    <div class="col-xs-4 col-sm-2"> 
     <a href=""><i class="fa fa-twitter-square fa-icon"></i></a> 
    </div> 
    <div class="col-xs-4 col-sm-2"> 
     <a href=""><i class="fa fa-skype fa-icon"></i></a> 
    </div> 
    <div class="col-xs-4 col-sm-2"> 
     <a href=""><i class="fa fa-facebook-square fa-icon"></i></a> 
    </div> 
    <div class="col-xs-4 col-sm-2"> 
     <a href=""><i class="fa fa-github-square fa-icon"></i></a> 
    </div> 
</div> 

これを試してみてください。したがって、6列の2列になります。モバイル以外のデバイス（小デバイスから大デバイスへ）では、各divは16.66％（100/6）になります。

は、このデモで http://jsbin.com/riwiva/edit?html,output

感謝を見てください！