There are a couple of options to consider in this situation. Perhaps the smoothest approach would be to utilize a percentage for positioning, and then at a specific predetermined screen width, such as a minimum threshold, you could transition to 0% or adjust other styling properties. This way, the element would smoothly "snap into place," although at smaller resolutions like those commonly found on landscape-oriented phones, this effect may not even be noticeable. To achieve this, follow @Raunak Kathuria's advice and make use of CSS media queries. If needed, I can provide an example, but there are many resources available online for reference.
Alternatively, you could opt to employ multiple media queries, each targeting different screen sizes to relocate the div accordingly. This method results in abrupt changes rather than a gradual transition.
During the process of designing responsively, it's easy to get caught up in how the page appears while being resized. However, in reality, most users do not actively resize their browser window when viewing a website; they simply browse and proceed. Therefore, as long as your page displays appropriately at various screen sizes, the smoothness of movement becomes less critical. Personally, I lean towards using media queries over fluid layouts due to the precise control over pixels that it offers.