3 columns 2 rows respond to 2 columns 3 rows
I am using Bootstrap css grid layout, it works great.
I haven't found an example where it can react and convert 3 columns and 2 rows to 2 columns and 3 rows.
What it does is create a separate 6-row column. I can convert even columns from 4 to 2, but how do I do 3 since they are on 2 different rows?
I thought that if there is a solution for an even number of columns, then it can be done for an odd number.
source to share
Try to use
<div class="col-xs-6 col-sm-6 col-md-4" ></div>
<div class="col-xs-6 col-sm-6 col-md-4" ></div>
<div class="col-xs-6 col-sm-6 col-md-4" ></div>
<div class="col-xs-6 col-sm-6 col-md-4" ></div>
<div class="col-xs-6 col-sm-6 col-md-4" ></div>
<div class="col-xs-6 col-sm-6 col-md-4" ></div>
source to share
Please be aware that you might have to think outside the box (I know I know). It can help you visualize it better if you draw the different stages first.
Then consider that you may not need rows other than the ones that contain columns. The Bootstrap extra column will automatically have a second or third row inserted automatically.
http://getbootstrap.com/css/#grid-example-mixed
You have 6 full divs. Then just adjust the column class width numbers.
Now, you didn't say if you want to use three columns on the desktop screen or on the mobile. For simplicity's sake, I'm going to assume that the two column layout is mobile layout.
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-4"> Content </div>
<div class="col-xs-6 col-sm-6 col-md-4"> Content </div>
<div class="col-xs-6 col-sm-6 col-md-4"> Content </div>
<div class="col-xs-6 col-sm-6 col-md-4"> Content </div>
<div class="col-xs-6 col-sm-6 col-md-4"> Content </div>
<div class="col-xs-6 col-sm-6 col-md-4"> Content </div>
</div>
You can toggle it, but why put so many columns in such a small space ... there might be reasons to do it this way, but it's not so common due to finger width issues. Bootstrap is a level of flexibility, however.
<div class="row">
<div class="col-xs-4 col-sm-4 col-md-6"> Content </div>
<div class="col-xs-4 col-sm-4 col-md-6"> Content </div>
<div class="col-xs-4 col-sm-4 col-md-6"> Content </div>
<div class="col-xs-4 col-sm-4 col-md-6"> Content </div>
<div class="col-xs-4 col-sm-4 col-md-6"> Content </div>
<div class="col-xs-4 col-sm-4 col-md-6"> Content </div>
</div>
Edit There are also ways to keep it centered with offsets if you say 7 columns. It just requires adjusting the column widths and then adding offsets to keep it centered.
http://getbootstrap.com/css/#grid-offsetting
The important thing to remember when adding an offset is that the column width plus offset cannot be 12, or it will be fully offset to the right. It also works best when the column width is an even number (2, 4, 6, 8, or 10).
You can practice on JSfiddle or CodePen (broadcast live updates in WYSIWYG viewer).
source to share