Responsive design works because of the combination of CSS layout and CSS media-queries. You can change the layout for different sizes.
When I first started, I created two breakpoints (where the layout changes): one for iPad-sized screens and one for phone-sized screens. It seemed logical.
Later on I figured out a better way: create breakpoints when the layout breaks.
I just shrank the width of my browser window until the design broke in some way, then I dealt with it, either by changing things or by creating a breakpoint and changing the layout at that point.
This made more sense because I was working with the design rather than thinking about specific devices.
Seems almost obvious in hindsight, but i had never read about this specific approach before.