How to set the display of an element at a certain screen size inline?

Question

css

I make a simple widget in the form of a picture for insertion on other people's sites.

<div>
    <a href="https://site.ru/"><img src="https://site.ru/image.png" width="100%"></a>
</div>

The widget will be inserted in 2 places of someone else's site, in the sidebar (larger picture) and in the footer (smaller picture). But it is necessary that only one is displayed at a time. Those. when desktop - sidebar, and when mobile - in the footer.
media inline is not prescribed, tell me how you can solve this problem? Preferably without js.

Answer 1

Did you understand correctly?