Twitter bootstrap Flexbox和Bootstrap类实现响应性布局

我在使用flexbox和Bootstrap响应类时遇到了很大的麻烦。因为一张图片相当于1k个单词，下面是我希望在桌面大小分辨率和手机大小分辨率上实现的图片

桌面

移动

我还创建了一把小提琴，你可以在JSBin上找到它：

我必须指出，我不确定flexbox是否是解决方案。这只是一个尝试，这是一个屏幕（取自小提琴），显示我当前的进展：

---

不错，嗯？（请帮帮我！！）

您可以使用这样嵌套的引导行/列

白天
白天
白天
白天
白天
白天
白天
白天
白天
白天
白天
白天
白天
白天
白天
白天
白天
白天
白天
白天
白天
白天
白天
白天
白天
白天
白天
白天
白天
白天
白天
白天
白天
白天
白天
白天
活动
活动
活动
活动
活动
活动
活动
活动
活动
活动
活动
活动
活动
活动
活动
活动
活动
活动
活动
活动
活动
活动
活动
活动
活动
活动
活动
活动
活动
活动
活动
活动
活动
活动
活动
活动

<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>