How to change Bootstrap column width to another size responsively?

Question

So basically I have something like

<div class="col-xs-3">
stuff
</div>

and I want it to change to something like

<div class="col-xs-8 col-xs-offset-2">
stuff
</div

So I essentially want to take a div that's placed on the left and move it to the center and widen the column size when the viewport width is <768px. How can I do this?

Answer 1

Check the grid documentation from their site.

You can define multiple classes for the different breakpoints. If I understand you correctly you need something like this:

<div class="col-sm-3 col-xs-8 col-xs-offset-2">stuff</div>

This translates to: 3 columns on small devices (>= 768px) and 8 columns + 2 offset columns for extra small devices (< 768px). They also have col-md and col-lg- classes.