javascript - Change number of columns depending on screen size - Stack Overflow

admin管理员组

文章数量:1344708

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

Share Improve this question Follow asked Sep 9, 2014 at 3:01 user3339562user3339562 1,39544 gold badges1818 silver badges3434 bronze badges 1

• 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

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 9

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.

本文标签： javascriptChange number of columns depending on screen sizeStack Overflow