Flexbox和Bootstrap类实现响应式布局

Question

我使用flexbox和Bootstrap响应类遇到了大麻烦。由于图像价值1k字以下，因此您可以在桌面大小的分辨率下获得我想要的图片，然后是移动尺寸分辨率。

桌面

移动

我还在JSBin上创建了一个小提琴：https://jsbin.com/potunozoco/edit?html,output

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

不错，呃？ （请帮帮我!!）

Answer 1

您可以使用像这样嵌套的Bootstrap行/列。

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>