html - Making new row of bootstrap float left while breaks onto new line -
<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
Post a Comment