Change number of columns depending on screen size

Question

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:

&l         


        

Answer 1

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

Answer 2

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

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