To achieve your desired outcome, you will need to utilize a media query.
It is quite straightforward.
Within your CSS file, organize your styles as follows:
https://getbootstrap.com/docs/4.0/layout/overview/
@media (min-width: 576px) { .div1 {float:left}; .div2 {float:left} }
// For medium devices (tablets, 768px and up)
@media (min-width: 768px) { .div1 {float:left}; .div2 {float:left} }
// Catering to large devices (desktops, 992px and up)
@media (min-width: 992px) { .div1 {float:left}; .div2 {float:right} }
// Tailored for extra-large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { .div1 {float:left}; .div2 {float:right} }
Since you tagged bootstrap-4, refer to the guideline on how to implement this within the framework.
https://getbootstrap.com/docs/4.0/utilities/float/
<div class="float-sm-left">Float left on viewports sized SM (small) or wider</div><br>
<div class="float-md-left">Float left on viewports sized MD (medium) or wider</div><br>
<div class="float-lg-left">Float left on viewports sized LG (large) or wider</div><br>
<div class="float-xl-left">Float left on viewports sized XL (extra-large) or wider</div><br>
Apply the appropriate classes based on the viewport width, and you're all set.
<div class="float-sm-left">Content goes here</div>
<div class="float-sm-left float-md-right">Content goes here</div>