Clever Geek Handbook

Change the number of columns depending on the screen size

I am experimenting with Bootstrap and I was wondering how I can adjust the number of columns depending on the 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 a large screen, and I would like to switch it to two rows of 3 columns on medium screens and three rows of 2 columns on small screens. It seems to me that I can change the width of the columns, not the number of columns. Can I do this with Bootstrap, and if there wasn't a good way to do it? Javascript?

+3


source to share


3 answers


Yes, you can change the number of columns with Bootstrap. For this flexible mesh.

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 Demo for download .

+7


source 


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


+1


source 


<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 is not very SEO friendly. You may want to instead approach this by using nested columns for more granular control over your content without repeating it.

0


source






More articles:


All Articles