Bootstrap网格堆叠

Question

在尝试定位网格div时，我遇到了一个问题，即元素不会漂浮在他们之前的兄弟之上。

这是一个codepen，其中包含以下代码（以jade / sass为单位）进行演示：

.container
  .div1.col-xs-8
  .div2.col-xs-8
  .div3.col-xs-4

.container {
  width: 100vw;
  height: 100vh;
  background-color: #333;

  .div1 {
    height: 100px;
    background-color: #933;
  }

  .div2 {
    height: 300px;
    background-color: #393;
  }

  .div3 {
    height: 300px;
    background-color: #339;
  }
}

预期行为：

[ 1 ] [ 3 ]
[ 2 ]

实际行为：

[ 1 ]
[ 2 ] [ 3 ]

任何人都知道如何实现预期的行为？