Is it possible to set the base pixel size in CSS?

Question

css

Hello colleagues!
Confused with PX and EM. When laying out I use Flexbox grid , media is specified in EM , there is a type code
@media only screen and (min-width: 48em)

<div class="col-xs-12 col-sm-12 col-md-6 cal-lg-6"></div>

If we take the pixel size as 16, then everything should display normally (768px) and the .col-sm-12 rule should work, as I would like it to.
But this is not happening!
This rule (.col-sm-12) works for me with a width of 1023px (at 1024px in two columns - .col-md-6).
How can I make 48em equal 768px and work in those proportions?

col-xs-* - phones, up to 480px
col-sm-* - tablets, 768px and up
col-md-* - desktops, 992px and up
col-lg-* - large desktops, 1200px and up

Thank you very much for your reply!

Answer 1

For using bootstrap and flexboxgrid, I would personally shoot on the spot.
Especially when you have to sort out scribbles like
Write a list of your media queries in exactly 5 minutes. Just like writing your own grid.