instead of using float

try these class of flex ,it’s more convenience
class=”d-flex justify-content-xl-end justify-content-md-center”

You can do by this way. change float-lg-right as you need for large screen.

<div class="float-lg-right text-center">
    <button class="btn btn-primary">Click Me</button>
</div>

You can create your own custom class and add a css media query for it targetting lager devices, and set the default value smaller devices, refer below

<a class="btn btn-buy addToCart toggleRight">Button</a>
<style>
 .toggleRight{
        text-align:center;
        float:none;
    }
    @media only screen and (min-width: 768px) {
    .toggleRight{
        float:right;
        text-align:initial;
    }
    }
</style>

class="btn btn-buy pull-right addToCart"

this is my code, i want pull-right only on larger devices and center-block on small devices, how to make it?
thanks in advance