は、新しい行に改行しながら

Question

<style> 
 
.xx{ 
 
\t min-height: 40px; 
 
\t margin-top:15px; 
 
\t background: white; 
 
} 
 
.yy{ 
 
\t min-height: 100px; 
 
\t margin-top: 15px; 
 
\t background: white; 
 
} 
 
.zz{ 
 
\t min-height: 95px; 
 
\t margin-top: 15px; 
 
\t background: white; 
 
} 
 
.pp{ 
 
\t min-height: 120px; 
 
\t margin-top: 15px; 
 
\t 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>

問題を残しました。

要件：5は、3列目の高さで乱さないようにしてください。3と4のちょうど下に整列する必要があります。さらに、ウィンドウをモバイルサイズにリサイズするときは、1,3,2,4,6

これまでのところ私は試しました： divをthis is text 5と一緒に移動すると、 this is text 6は可変の高さであるため、問題を解決してください。 6 & 7は同じ列にある必要がありますが、何らかの形で5を整列させる必要があります。

Answer 1

5と7を整列させる必要があるため、これらの列に対して新しい行を作成しました。列内に行を持つことが許されています。なぜなら、2行、1行が上位5列、もう1行が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>