In Studio.Design, you can change the layout, appearance, and position of boxes and text for each breakpoint, but you can't change the images themselves, the text content, or the grouping structure. (See: When mobile design changes also affect the PC size design)
So, if you want to show different images on desktop and mobile, prepare separate images for each, and use the box show/hide settings feature to toggle visibility for each breakpoint.
Tip: Responsive design in Studio.Design
In Studio.Design, you build responsive designs by starting from a single page design and adjusting styles for each screen width (breakpoint).
The layout, appearance, and position of boxes and text can be changed per breakpoint, but the actual image and text content, as well as the grouping structure, are shared across breakpoints.
For an overview of responsive design and related features, see these articles:
Show different images on desktop and mobile
This article walks you through how to change the image shown on tablet-sized screens and smaller, based on the layout you've already set up for the Default or Small (desktop size) view.
Step 1. Create an image box for tablet and mobile
Create an image box to display on tablet-sized screens and smaller. You'll do this by copying and pasting the desktop image box.
Select the breakpoint you want to use as the desktop baseline (such as [Default]).
Select the parent box of the image box you want to duplicate.
Copy and paste to duplicate it.
Step 2. Swap in the tablet and mobile image
Set the image for tablet-sized screens and smaller on the duplicated box.
Select the duplicated image box.
Double-click the image.
In the [Upload & Replace] panel that opens on the left, change the image.
Adjust the appearance and layout if needed.
Step 3. Use box visibility settings to switch between desktop and tablet/mobile views
Set the show/hide visibility per breakpoint for both the desktop box and the tablet/mobile box.
Open the Layers panel.
Hover over the parent box of the tablet/mobile image box you created in steps 1 and 2, and click the eye icon
(Visibility settings) that appears on the right.Select the device sizes you want to hide (such as [Default] or [Small]) and uncheck them.
Next, hover over the parent box of the desktop image box, and click the eye icon
(Visibility settings) that appears on the right.Select the device sizes you want to hide (such as [Tablet], [Mobile], or [Mini]) and uncheck them.
Step 4. Check that it works
Before publishing, confirm that everything is working as expected.
In the toolbar at the bottom, click through each breakpoint such as [Default], [Tablet], and [Mobile], and check that the image shown for each screen width switches correctly.
If needed, also check the responsive design in Live Preview.
If you're editing a site that's already published, update the site to apply your changes to the live version.