How to center right-aligned shortcodes for mobile devices

Hello,

For the desktop version of my site at https://culturedarm.com/ I use a Bandcamp shortcode to embed music down the right hand side of some posts. To this end I have been using the html tag <div style=”float: right> in order to get my post text to wrap around the embedded music. An illustration of how this works can be found at:

https://culturedarm.com/suk-hong-pedigree/

and here’s an image:

The problem with this is that on mobile, the shortcode is also embedding to the right and obviously the text isn’t wrapping because there isn’t space. The music is also embedding above my text, which is understandable because that’s where the shortcode is effectively placed. But the result looks like this, which is especially unattractive when the embed comes immediately after the featured image:

Ideally I would like the embedded Bandcamp music to be centered on mobile devices while remaining right-aligned on desktop. I also wonder whether there’s a way to tell the shortcode to fall beneath the text on mobile when it is aligned to the right. Is there any custom code I can add to this effect?

Thanks for the help.