How to properly address styles for mobile phones?

Question

css

Hello,
I took an order for the layout of the site, I need a mobile version. I think how to correctly implement the definition of what we have in front of us is a mobile phone. Once (in 2011-2013) I did this based solely on the width of the screen, but today this does not work. For example, the most popular Samsung models have a virtual viewport in CSS pixels - from 920 to 980 pixels. At the same time, I would like to display a telephone layout on phones. But in the meantime, 980 width can be on desktops in narrow window mode, and on some very old low-dpi tablets. Therefore, it seems logical to rely on the device-pixel-ratio in Media Query: for smartphones, it will be significantly higher with equal width.
But now I started reading the documentation for the latest version of Bootstrap, and there the breakpoints are determined exactly by the width in pixels: https://bootstrap-4.ru/docs/4.1/layout/overview/#r... The
question is:
1. Why they implemented it exactly like this
2. How it works for them 3. How I should do
it and how you do it in your practice
"layouts on mobile. Although it's a little disappointing that he uses flexbox - it means that with support for older devices everything will be very bad or not at all.