Question: I am building a website using Bootstrap v3.3.1

I have the following design for one of the sections (please view the image). I am going to use **.col-lg-4** and **.col-lg-8** for the two columns. When the viewport is small enough for the columns to span on full-width, **I would like the left column content (those eight 'rows' with colored icons) to be displayed in 3 columns, then in 2 and only on very low resolutions in one column.**

However, right now I can not think of a simple solution how to increase number of columns when on smaller resolution. First I tried to have left column content in nested rows, which makes no sense as I can not display them in one row.

I read bootstrap official documentation and also tried to search online, but I was not able to find what I want. I believe this is a really easy task for bootstrap and it should be possible in a natural, painless way. Maybe there is some special word or term for this technique which I do not know and that's why I was not able to find the solution.

I just need an idea to approach this right. Thanks

![enter image description here](https://i.stack.imgur.com/NzJxg.png)

UPDATE:

I just made a quick edit to the picture to make it clearer what this section should look like on a smaller resolution:

![enter image description here](https://i.stack.imgur.com/jrYSo.png)

Answer: 
So if I understood the question correctly, you want to dynamically change the number of columns of just the left column contents based on the screen resolution as follows:

large: col-lg-4 on the left (only 33% of the view)

medium: 3 columns of content from the left side(spanning the whole view)

small: 2 columns of content from the left side(spanning the whole view)

really small: 1 column of content from the left side(spanning the whole view)

If the above is correct, I believe you should use the nesting capabilities of bootstrap shown below:

```
<div class="row">
    <div class="col-lg-4">
        <div class="row">
            <div class="left col-lg-12 col-md-4 col-sm-6 col-xs-12">LEFT SIDE CONTENT</div> 
            <div class="left col-lg-12 col-md-4 col-sm-6 col-xs-12">LEFT SIDE CONTENT</div> 
            <div class="left col-lg-12 col-md-4 col-sm-6 col-xs-12">LEFT SIDE CONTENT</div> 
            <div class="left col-lg-12 col-md-4 col-sm-6 col-xs-12">LEFT SIDE CONTENT</div> 
            <div class="left col-lg-12 col-md-4 col-sm-6 col-xs-12">LEFT SIDE CONTENT</div> 
        </div>
    </div>
    <div class="col-lg-8">
        RIGHT SIDE CONTENT RIGHT SIDE CONTENT RIGHT SIDE CONTENT RIGHT SIDE CONTENT RIGHT SIDE CONTENT RIGHT SIDE CONTENT RIGHT SIDE CONTENT RIGHT SIDE CONTENT RIGHT SIDE CONTENT RIGHT SIDE CONTENT RIGHT SIDE CONTENT RIGHT SIDE CONTENT RIGHT SIDE CONTENT RIGHT SIDE CONTENT RIGHT SIDE CONTENT RIGHT SIDE CONTENT RIGHT SIDE CONTENT 
    </div>
</div>

```

and heres the fiddle demo : <http://jsfiddle.net/swm53ran/4/> To view the dynamic changing of the columns, drag the result column to change it's width to simulate resolution change. Hope this helps!
To get varied column groupings at various screen sizes you can apply multiple classes for your columns.

See Bootstrap [mobile and desktop](http://getbootstrap.com/css/#grid-example-mixed) example.

```html
<div class="col-xs-12 col-sm-10 col-md-8 col-lg-6"></div>

```

With the above css classes the DIV will adjust itself to 12, 10, 8 or 6 columns depending on the viewport size.