Flexbox和Bootstrap類來實現響應式佈局

Question

我遇到了使用flexbox和Bootstrap響應類的大麻煩。由於圖片的價值爲1k字，因此您可以在桌面尺寸的分辨率下獲得我想要的圖片，然後獲得手機尺寸的分辨率。

桌面

移動

我還創建了一個小提琴，你可以找到關於JSBin：https://jsbin.com/potunozoco/edit?html,output

我必須準確，我是不知道Flexbox是否是解決方案。這只是一個嘗試，這是顯示了我目前的進展屏幕（從小提琴拍攝）：

不壞，嗯？ （請幫幫我!!）

Answer 1

您可以使用嵌套這樣的引導行/ COLS ..

http://www.codeply.com/go/uuZHho9U9V

<div class="container-fluid"> 
    <div class="row"> 
     <div class="col-xs-2 col-sm-12"> 
      <div class="row"> 
       <div class="col-xs-12 col-sm-1">Day</div> 
       <div class="col-xs-12 col-sm-1">Day</div> 
       <div class="col-xs-12 col-sm-1">Day</div> 
       <div class="col-xs-12 col-sm-1">Day</div> 
       <div class="col-xs-12 col-sm-1">Day</div> 
       <div class="col-xs-12 col-sm-1">Day</div> 
       <div class="col-xs-12 col-sm-1">Day</div> 
       <div class="col-xs-12 col-sm-1">Day</div> 
       <div class="col-xs-12 col-sm-1">Day</div> 
       <div class="col-xs-12 col-sm-1">Day</div> 
       <div class="col-xs-12 col-sm-1">Day</div> 
       <div class="col-xs-12 col-sm-1">Day</div> 
      </div> 
      <div class="row"> 
       <div class="col-xs-12 col-sm-1 visible-xs">Day</div> 
       <div class="col-xs-12 col-sm-1 visible-xs">Day</div> 
       <div class="col-xs-12 col-sm-1 visible-xs">Day</div> 
       <div class="col-xs-12 col-sm-1 visible-xs">Day</div> 
       <div class="col-xs-12 col-sm-1 visible-xs">Day</div> 
       <div class="col-xs-12 col-sm-1 visible-xs">Day</div> 
       <div class="col-xs-12 col-sm-1 visible-xs">Day</div> 
       <div class="col-xs-12 col-sm-1 visible-xs">Day</div> 
       <div class="col-xs-12 col-sm-1 visible-xs">Day</div> 
       <div class="col-xs-12 col-sm-1 visible-xs">Day</div> 
       <div class="col-xs-12 col-sm-1 visible-xs">Day</div> 
       <div class="col-xs-12 col-sm-1 visible-xs">Day</div> 
      </div> 
      <div class="row"> 
       <div class="col-xs-12 col-sm-1 visible-xs">Day</div> 
       <div class="col-xs-12 col-sm-1 visible-xs">Day</div> 
       <div class="col-xs-12 col-sm-1 visible-xs">Day</div> 
       <div class="col-xs-12 col-sm-1 visible-xs">Day</div> 
       <div class="col-xs-12 col-sm-1 visible-xs">Day</div> 
       <div class="col-xs-12 col-sm-1 visible-xs">Day</div> 
       <div class="col-xs-12 col-sm-1 visible-xs">Day</div> 
       <div class="col-xs-12 col-sm-1 visible-xs">Day</div> 
       <div class="col-xs-12 col-sm-1 visible-xs">Day</div> 
       <div class="col-xs-12 col-sm-1 visible-xs">Day</div> 
       <div class="col-xs-12 col-sm-1 visible-xs">Day</div> 
       <div class="col-xs-12 col-sm-1 visible-xs">Day</div> 
      </div> 
     </div> 
     <div class="col-xs-10 col-sm-12"> 
      <div class="row"> 
       <div class="col-xs-12 col-sm-1">Activity</div> 
       <div class="col-xs-12 col-sm-1">Activity</div> 
       <div class="col-xs-12 col-sm-1">Activity</div> 
       <div class="col-xs-12 col-sm-1">Activity</div> 
       <div class="col-xs-12 col-sm-1">Activity</div> 
       <div class="col-xs-12 col-sm-1">Activity</div> 
       <div class="col-xs-12 col-sm-1">Activity</div> 
       <div class="col-xs-12 col-sm-1">Activity</div> 
       <div class="col-xs-12 col-sm-1">Activity</div> 
       <div class="col-xs-12 col-sm-1">Activity</div> 
       <div class="col-xs-12 col-sm-1">Activity</div> 
       <div class="col-xs-12 col-sm-1">Activity</div> 
      </div> 
      <div class="row"> 
       <div class="col-xs-12 col-sm-1">Activity</div> 
       <div class="col-xs-12 col-sm-1">Activity</div> 
       <div class="col-xs-12 col-sm-1">Activity</div> 
       <div class="col-xs-12 col-sm-1">Activity</div> 
       <div class="col-xs-12 col-sm-1">Activity</div> 
       <div class="col-xs-12 col-sm-1">Activity</div> 
       <div class="col-xs-12 col-sm-1">Activity</div> 
       <div class="col-xs-12 col-sm-1">Activity</div> 
       <div class="col-xs-12 col-sm-1">Activity</div> 
       <div class="col-xs-12 col-sm-1">Activity</div> 
       <div class="col-xs-12 col-sm-1">Activity</div> 
       <div class="col-xs-12 col-sm-1">Activity</div> 
      </div> 
      <div class="row"> 
       <div class="col-xs-12 col-sm-1">Activity</div> 
       <div class="col-xs-12 col-sm-1">Activity</div> 
       <div class="col-xs-12 col-sm-1">Activity</div> 
       <div class="col-xs-12 col-sm-1">Activity</div> 
       <div class="col-xs-12 col-sm-1">Activity</div> 
       <div class="col-xs-12 col-sm-1">Activity</div> 
       <div class="col-xs-12 col-sm-1">Activity</div> 
       <div class="col-xs-12 col-sm-1">Activity</div> 
       <div class="col-xs-12 col-sm-1">Activity</div> 
       <div class="col-xs-12 col-sm-1">Activity</div> 
       <div class="col-xs-12 col-sm-1">Activity</div> 
       <div class="col-xs-12 col-sm-1">Activity</div> 
      </div> 
     </div> 

    </div> 
</div>