Bootstrap columns in mobile version

Question

I'm using bootstrap to make a website, but it's something is wrong.

I want to make 2 rows and 3 columns and when the screen changes to mobile, I want it to be 3 rows and 2 columns.

Desktop

|A|   |B|   |C| 
|D|   |E|   |F|

Mobile

|A|  |B|
|C|  |D|
|E|  |F|

I used the code below to do it, but the images don't stay like I want it to.

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

The images stay like this

|A| |B|
    |C|
|D| |E|
|F|

Thanks in advance!

Answer 1

4 columns on desktop and 2 columns on mobile:

<div class="row">
<div class="col-sm-3 col-6 m-auto"></div>
<div class="col-sm-3 col-6 m-auto"></div>
<div class="col-sm-3 col-6 m-auto"></div>
<div class="col-sm-3 col-6 m-auto"></div>
</div>

May need to add class fluid to image object to keep the image responsive within div.

Answer 2

I have run into this problem before. The issue has been that my content is different heights. Because Bootstrap uses floats to arrange it's columns your column C cannot float all the way to the left if your column A is taller than column B.

I have included a link to a codepen so you can see it in action. The top two rows are exactly your code above while the bottom two rows show a div with a different height than the other divs.

http://codepen.io/egerrard/pen/PGRQYK

The solution for you will be to set the height of your divs to the max height for all your content. Something like

.maxHeightDiv {
    height: 200px;
}

You'll probably have to set heights for different window widths. It can be a little annoying but this is a caveat of the bootstrap float system.