CODEWITHSUNDEEP
htmlcsstwitter-bootstrapresponsive-design
user2760338
user2760338

Reputation: 235

3 columns 2 rows responsive to 2 columns 3 rows

I'm using Bootstrap css grid layout it works great.

I haven't found an example where it can be responsive and convert 3 columns and 2 rows into 2 columns and 3 rows.

What it does is create single column of 6 rows. I can convert even columns from 4 to 2 but how to do 3 as they are in 2 different rows?

I thought if there is solution for an even number of columns then it could be done for odd.

Upvotes: 3

Views: 14875

Answers (2)

HB77
HB77

Reputation: 35

Take into consideration that you may have to think outside of the box (punny I know) on this one. It may help visualize it better if you drew out the different stages first.

Then consider you may not need rows, except the one to contain the columns. In Bootstrap extra columns will force a second or third row automatically.

http://getbootstrap.com/css/#grid-example-mixed

You have 6 total divs. Then just adjust the column class width numbers.

Now you didn't say if you wanted the three columns on a desktop-sized screen or a mobile. I'm going to assume here, for the sake of simplicity, that the 2 columns layout is a 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 switch it up, but why put that many columns into such a small space... there could be reasons to do it that way but it's not common due to finger-width issues. However, Bootstrap is that level of flexible.

<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 using offsets, if you have say a 7 column layout. It just requires adjusting the width of the columns and then adding offsets to keep it centered.

http://getbootstrap.com/css/#grid-offsetting

An important thing to remember when adding an offset, is that the col width plus the offset cannot equal 12 or it will be pushed all the way to the right. It also works best when the column width is an even number (2, 4, 6, 8, or 10).

You can practice in JSfiddle or CodePen (codepen live updates in a WYSIWYG viewer).

Upvotes: 2

Ahmad
Ahmad

Reputation: 477

Try using

<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>

Upvotes: 2

Related Questions