html - Grid alignment in Bootstrap on small devices -


i have 3 column row 3 images using bootstrap. below.

|         |        |        |
|         |        |        |
|         |        |        |
|         |        |        |
|--------------------- |
|         |        |        |
|         |        |        |
|         |        |        |
|         |        |        |

in smaller devices, have problem see 2 column , 1 column empty content. there anyway can join these 2 rows , 2x2 2x2 2x2 schema on smaller devices?

my markup

<div class="row">  <div class="col-md-4 col-sm-4 col-xs-12"></div>  <div class="col-md-4 col-sm-4 col-xs-12"></div>  <div class="col-md-4 col-sm-4 col-xs-12"></div> </div> <div class="row">  <div class="col-md-4 col-sm-4 col-xs-12"></div>  <div class="col-md-4 col-sm-4 col-xs-12"></div>  <div class="col-md-4 col-sm-4 col-xs-12"></div> </div> 

this give 2 columns on small devices , 3 columns on tablet , up. .clearfix ensures columns clear floats properly.

<div class="row">   <div class="col-xs-6 col-sm-4"></div>   <div class="col-xs-6 col-sm-4"></div>   <div class="clearfix visible-xs"></div>   <div class="col-xs-6 col-sm-4"></div>   <div class="clearfix hidden-xs"></div>   <div class="col-xs-6 col-sm-4"></div>   <div class="clearfix visible-xs"></div>   <div class="col-xs-6 col-sm-4"></div>   <div class="col-xs-6 col-sm-4"></div> </div> 

Comments

Popular posts from this blog

javascript - How to synchronize the Three.js and HTML/SVG coordinate systems (especially w.r.t. the y-axis)? -

javascript - How do I find how many occurences are there of a highlighted string, and which occurence is it? -

java - Reading data from multiple zip files and combining them to one -