Grid changing in responsive web design

I'm a designer, and I jump from mobile app design to web design, so the concept of responsive web design is new to me, i know the web should be on a grid. When responsive and grid come together makes me a little bit confused.

The question is: I have a 16-column grid at desktop size, when resizing to tablet or mobile:

1. the grid keeps its amount of columns, but the columns and gutters shrink (because of percentage-based size), the specific element changes the amount of columns it spans

-Or-

2. The grid shrinks until it's at the tablet or mobile breakpoint, it reset the columns and gutters' size to its initial state but reduces its amount of columns, for example: tablet is 8 columns, mobile is 4 columns

-Or-

3. Create a new grid at every breakpoint.

Which solution is correct ?