html - 使新的 Bootstrap 行向左浮动，同时中断到新行

Question

<style>
.xx{
	min-height: 40px;
	margin-top:15px;
	background: white;
}
.yy{
	min-height: 100px;
	margin-top: 15px;
	background: white;
}
.zz{
	min-height: 95px;
	margin-top: 15px;
	background: white;
}
.pp{
	min-height: 120px;
	margin-top: 15px;
	background: white;

}
</style>
<div style="background:grey; min-height:600px;">
<div class="row">

<div class="col-md-4">
<div class="text1 xx">This is text 1</div>
<div class="text3 xx">This is text 3</div>
</div>

<div class="col-md-4">
<div class="text2 xx">This is text 2</div>
<div class="text4 xx">This is text 4</div>
</div>

<div class="col-md-4">
<div class="text6 zz">This is text 6</div>
<div class="text7 pp">This is text 7</div>
</div>

<div class="col-md-8">
<div class="text5 yy">This is text 5</div>

</div>





</div>
</div>

问题:第三列中包含 this is text 6 的 div 可以是可变高度。

要求:5 应该不受第 3 列高度的影响，并且应该正好在 3 和 4 下方对齐。此外，将窗口调整为移动尺寸时，堆叠应按顺序排列:1,3,2,4,6

到目前为止，我已经尝试过: 如果我们移动 this is text 7 div 和 this is text 5 那么它也不会解决问题，因为 this is text 6 是可变高度。 6 和 7 必须在同一列中，同时使 5 以某种方式对齐。

Answer 1

由于 5 和 7 应该对齐，我为这些列创建了一个新行。允许在列内有行，这就是为什么我创建了 2 行，1 行包含上面的 5 列，另一行包含 text-7 和 text-5。这样 text5 和 7 对齐，并且将根据 text6 的高度位于第一行下方。

<div style="background:grey; min-height:600px;">
  <div class="row">
    <div class="col-md-12">
      <div class="row">
        <div class="col-md-4">
          <div class="text1 xx">This is text 1</div>
          <div class="text3 xx">This is text 3</div>
        </div>

        <div class="col-md-4">
          <div class="text2 xx">This is text 2</div>
          <div class="text4 xx">This is text 4</div>
        </div>
        <div class="col-md-4">
          <div class="text6 zz">This is text 6</div>
        </div>
      </div>
    </div>
    <div class="col-md-12">
      <div class="row">
        <div class="col-md-8">
          <div class="text5 yy">This is text 5</div>
        </div>
        <div class="col-md-4">
        <div class="text7 pp">This is text 7</div>
        </div>
      </div>
    </div>
  </div>
</div>