When using media queries in CSS, best practice is to let the design of the webpage determine when to add a breakpoint.

This JavaScript code will dynamically show the inner size of the web browser window in pixels (px) and em. You can easily decide at what window size it is best to add a breakpoint to change the position and size of HTML elements.

I added it to this page as a demonstration.

The source file: link

You can also use it by adding this code to your HTML page:
<script src="https://guntherwillems.com/main/js/windowsize.js"></script>