I am experimenting with Bootstrap and I was wondering how can I adjust number of columns depending of screen size. I saw this from Bootstrap CSS tutorial:

<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
  <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
  <div class="col-xs-6">.col-xs-6</div>
  <div class="col-xs-6">.col-xs-6</div>
</div>

I have 6 columns on big screen size and I would like to switch it to two rows of 3 columns on medium screens and to three rows of 2 columns on small screens. It looks to me that I can only change width of columns and not number of columns. Can I do it with Bootstrap and if not what would be a good way to do it? Javascript?

I am experimenting with Bootstrap and I was wondering how can I adjust number of columns depending of screen size. I saw this from Bootstrap CSS tutorial:

<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
  <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
  <div class="col-xs-6">.col-xs-6</div>
  <div class="col-xs-6">.col-xs-6</div>
</div>

I have 6 columns on big screen size and I would like to switch it to two rows of 3 columns on medium screens and to three rows of 2 columns on small screens. It looks to me that I can only change width of columns and not number of columns. Can I do it with Bootstrap and if not what would be a good way to do it? Javascript?

• javascript
• css
• ruby-on-rails
• twitter-bootstrap

• Your request is not clear. Are you going to show the same 7 fields on all screen sizes? Remember: "mobile first" is the base principle of responsive design. Please show how you want your data on xs. – PM 77-1 Commented Sep 9, 2014 at 3:30

3 Answers 3

Yes, you can change number of columns with Bootstrap. That's what flexible grid is for.

Here's an example that follows your instructions:

<div class="row">
  <div class="col-xs-6 col-md-4 col-lg-2">first</div>
  <div class="col-xs-6 col-md-4 col-lg-2">second</div>

  <div class="col-xs-6 col-md-4 col-lg-2">third</div>
  <div class="col-xs-6 col-md-4 col-lg-2">fourth</div>

  <div class="col-xs-6 col-md-4 col-lg-2">fifth</div>
  <div class="col-xs-6 col-md-4 col-lg-2">sixth</div>
</div>

See Bootply Demo.

<div class="row">
    <div class="col-lg-2 col-md-4 col-xs-6"></div>
    <div class="col-lg-2 col-md-4 col-xs-6"></div>
    <div class="col-lg-2 col-md-4 hidden-sm hidden-xs"></div>
    <div class="col-lg-2 hidden-md hidden-sm hidden-xs"></div>
    <div class="col-lg-2 hidden-md hidden-sm hidden-xs"></div>
    <div class="col-lg-2 hidden-md hidden-sm hidden-xs"></div>
</div>
<div class="row">
    <div class="hidden-lg col-md-4 col-xs-4"></div>
    <div class="hidden-lg col-md-4 col-xs-4"></div>
    <div class="hidden-lg col-md-4 hidden-sm hidden-xs"></div>
</div>
<div class="row">
    <div class="hidden-lg hidden-md col-xs-4"></div>
    <div class="hidden-lg hidden-md col-xs-4"></div>
</div>

<div class="row">
<div class="col-lg-6 visible-lg">Column 6 Large</div>
<div class="col-md-3 visible-md">Column 1 Medium</div>
<div class="col-md-3 visible-md">Column 2 Medium</div>
<div class="col-xs-2 visible-xs">Column 1 Small</div>
<div class="col-xs-2 visible-xs">Column 2 Small</div>
<div class="col-xs-2 visible-xs">Column 3 Small</div>
</row>

It should be noted that having duplicate content in separate columns like this isn't great for SEO. You might want to instead approach this by using nested columns for more granular control over your content without having to duplicate it.