Html 自举网格叠加

在尝试定位网格div时，我遇到了一个问题，即元素不会浮在它们以前的同级之上

下面是一个带有以下代码（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 ]

---

有人知道如何达到预期的行为吗？

你为什么会期望这样？这样看，列从左向右流动，但第二列太宽，无法容纳第一行，因此它移动到第二行。接下来的一个将在第二个之后出现。仅供参考：“元素不会浮在它们以前的同级之上”——我认为可能对

float

的作用有误解。它不“使元素浮动”，而是指定其他内容应如何围绕应用

float

的元素浮动。这是一个重要的区别，尽管通过它实现的效果可能会让它看起来不一样。遗憾的是，似乎没有一种方法可以实现所需的行为。