Using bootstrap to go from 3x2(desktop) to 2x3 (mobile) layout - html

Question

My webpage in desktop view is divided into a 2x3 layout i.e two rows with 3 grid-columns each (bootstrap rows and columns), as given in below:
**image1 image2 image3
image4 image5 image6**
<div class="row">
<div class="col-sm-4 col-md-4 col-lg-4">
<img src="image1.png"/>
</div>
<div class="col-sm-4 col-md-4 col-lg-4">
<img src="image2.png"/>
</div>
<div class="col-sm-4 col-md-4 col-lg-4">
<img src="image3.png"/>
</div>
</div>
<div class="row">
<div class="col-sm-4 col-md-4 col-lg-4">
<img src="image4.png"/>
</div>
<div class="col-sm-4 col-md-4 col-lg-4">
<img src="image5.png"/>
</div>
<div class="col-sm-4 col-md-4 col-lg-4">
<img src="image6.png"/>
</div>
</div>
When I reduce to a mobile size(col-xs), I want the page two be in a 2x3 layout, as given below:
**image1 image2
image3 image4
image5 image6**
Can this be achieved using the bootstrap framework?

Answer 1

Just add the declaration for the xs viewport in your column classes and make it a single row, like you see below. As long as the columns (and column offsets if you're using them) equal to 12, you can use a single row wrapper to make several rows worth of columns. I'm glad I could help.
<div class="row">
<div class="col-xs-6 col-sm-4 col-md-4 col-lg-4">
<img src="image1.png"/>
</div>
<div class="col-xs-6 col-sm-4 col-md-4 col-lg-4">
<img src="image2.png"/>
</div>
<div class="col-xs-6 col-sm-4 col-md-4 col-lg-4">
<img src="image3.png"/>
</div>
<div class="col-xs-6 col-sm-4 col-md-4 col-lg-4">
<img src="image4.png"/>
</div>
<div class="col-xs-6 col-sm-4 col-md-4 col-lg-4">
<img src="image5.png"/>
</div>
<div class="col-xs-6 col-sm-4 col-md-4 col-lg-4">
<img src="image6.png"/>
</div>
</div>
Example:
http://www.bootply.com/8JlDo3kXKH