在新线上打开新的自举浮动行

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＆amp; <{1}}必须在同一列中，同时以某种方式使7对齐。

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>