带包装的引导列

Question

我需要这样的布局：

1. 响应式设计（基于 bootstrap 3）
2. col-sm-7（紫色）有固定高度，但可选
3. col-sm-5（蓝色）具有可变高度（非动态），可选
4. 底部文本（绿色）应该换成紫色 和蓝色块并占据全宽 (col-sm-12)
5. 块可以有额外的分类取决于其他块的存在
6. 在移动视图中，它们应该被放样：

是否可以通过引导标记和 css 来实现此行为？怎么样？

Answer 1

只需将.pull-left 类添加到蓝色和紫色容器即可。

场景一：http://jsfiddle.net/xawvez5o/

场景二：http://jsfiddle.net/xawvez5o/1/

场景三：http://jsfiddle.net/xawvez5o/2/

场景四：http://jsfiddle.net/xawvez5o/3/