web_designer | Graphical tool for web designer | Frontend Utils library

Here is a solution I came up with. It involves creating a wrapper div around the target element. Basically, the way that this works is that the outer div is assigned the inline styles for the mobile mode, and the inner div is assigned the inline styles for desktop mode. When the browser window is resized to be below the threshold for desktop view, it resets the inner div's (desktop) inline styles to defaults so the outer div's (mobile) inline styles take over. When the browser window is resized to be above the threshold, it resets the outer div's (mobile) inline styles to defaults so the inner div's (desktop) inline styles take over. The way that it overrides the inline styles is by using the !important keyword in the rulesets in the CSS media queries.

I think it goes without saying that the inline styles in the snippet below would be replaced with your $attributes['style']. But since you will have separate mobile and desktop styles, I guess it would be $attributes['style-mobile'] and $attributes['style-desktop'].