Normally, I start answering: Do I use a limited max-width container or full-width responsive container?
Why this matter? Because in e-commerce for big screens (over 1600px) I can keep reorganizing element to fill the whole screen showing 5 or 6 columns of products. And in this case, I will need to design a wireframe/mockup for 4 sizes of screens and not for only 3.
When I'm using limited max-width container I used design for 3 sizes:
- Mobile (480px) I normally use 480px and make some guide lines for smaller screens like 320px to be certain that will fit for all.
- Desktop (998x, 1200px and 1980px) I normally use 1980px and make some guide lines for smaller screens like 998px and 1200px to be certain that will fit for all.
- Tablet (768px) I normally use 768px and make some guide lines for smaller screens like 520px to be certain that will fit for all.
As tablet normally has less access I design in the end.
To have a mobile-first, you should "forget" desktop and design mobile-first and then desktop.
The most important thing is thinking how the elements will grow and adapt for each screen keeping the same user experience and the same components priority. You also must think on the clean code without so many breaks and for it as an ex-developer it's easy, but for designers with no code experience, I recommend to talk with developers with wireframes on hands to find the best and simple solution for each component.
See most common breakpoints simplified in an image. You also can search on the web a full list of screen size.
But the best way to define the standard breakpoints on your website if you already have traffic is going to analytics and get most used screen sizes like the image below: