What you are proposing is an Adaptive Design and yes it safe and commonly used. Examples of popular websites with Adaptive Design include:
It can commonly be mixed up with the term Responsive Design. The differences between Adaptive Design and Responsive Design, the following is a good summary from Mozilla:
Both responsive and adaptive design attempt to optimize the user experience across different devices, adjusting for different viewport sizes, resolutions, usage contexts, control mechanisms, and so on.
Responsive design works on the principle of flexibility. The idea is that a single fluid design based upon media queries, flexible grids, and responsive images can be used to create a user experience that flexes and changes based on a multitude of factors. The primary benefit is that each user experiences a consistent design. One drawback is a slower load time.
Adaptive design is more like the modern definition of progressive enhancement. Instead of one flexible design, adaptive design detects the device and other features, and then provides the appropriate feature and layout based on a predefined set of viewport sizes and other characteristics. This can result in a lack of consistency across platforms and devices, but the load time tends to be faster.
So to summarise the trade-offs of using an adaptive design for the example you've provided, you may not achieve a consistent design across all device sizes since you've only defined two view sizes, but design and build times should be quicker as you are only designing for two set screen sizes.