html - Making new row of bootstrap float left while breaks onto new line -


enter image description here

<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 text 1</div>  <div class="text3 xx">this text 3</div>  </div>    <div class="col-md-4">  <div class="text2 xx">this text 2</div>  <div class="text4 xx">this text 4</div>  </div>    <div class="col-md-4">  <div class="text6 zz">this text 6</div>  <div class="text7 pp">this text 7</div>  </div>    <div class="col-md-8">  <div class="text5 yy">this text 5</div>    </div>            </div>  </div>

problem : div in third column, containing this text 6 can of variable height.

requirement : 5 should undisturbed height of 3rd column , should aligned below 3 , 4 . further, on resizing window mobile size, stacking should in order : 1,3,2,4,6

so far i've tried : if move this text 7 div along this text 5 not solve problem , this text 6 of variable height. 6 & 7 have in same column, while making 5 aligned somehow.

since 5 , 7 should aligned, created new row these columns. allowed have rows inside columns, thats why created 2 rows, 1 containing upper 5 columns , other row containing text-7 , text-5. way text5 , 7 aligned , below first row based on height of 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 text 1</div>           <div class="text3 xx">this text 3</div>         </div>          <div class="col-md-4">           <div class="text2 xx">this text 2</div>           <div class="text4 xx">this text 4</div>         </div>         <div class="col-md-4">           <div class="text6 zz">this text 6</div>         </div>       </div>     </div>     <div class="col-md-12">       <div class="row">         <div class="col-md-8">           <div class="text5 yy">this text 5</div>         </div>         <div class="col-md-4">         <div class="text7 pp">this text 7</div>         </div>       </div>     </div>   </div> </div> 

Comments

Popular posts from this blog

python - How to insert QWidgets in the middle of a Layout? -

python - serve multiple gunicorn django instances under nginx ubuntu -

module - Prestashop displayPaymentReturn hook url -