Studioでは、ボックスやテキストのレイアウト・外観・ポジションなどはブレイクポイントごとに変更できますが、画像そのもの・テキスト・グルーピング構造を変更することはできません。（参考：モバイルモードのデザイン変更が、PCサイズのデザインにも反映されてしまう場合）
そのため、PCとモバイルで別々の画像を表示したい場合は、PCとモバイルでそれぞれ別々の画像を用意し、ボックスの表示・非表示設定機能でブレイクポイントごとに表示・非表示を切り替えます。
Point：Studioのレスポンシブデザイン
Studioでは、1つのページデザインを基準に、各種画面幅（ブレイクポイント）ごとにスタイルを調整してレスポンシブデザインを実現します。
ボックスやテキストのレイアウト・外観・ポジションなどはブレイクポイントごとに変更できますが、画像やテキスト自体の内容、グルーピング構造は共通です。
レスポンシブデザイン全体の考え方や関連機能については、次の記事も参考にしてください。
PCとモバイルで表示する画像を変える
この記事では、設定済みのデフォルトやスモール（PCサイズ）表示のレイアウトをもとに、 タブレット以下の画面サイズで表示する画像を変更する手順を紹介します。
手順 1. タブレット＆モバイル用の画像ボックスを作成する
タブレット以下の画面サイズで表示する画像ボックスを作成します。PC用の画像ボックスをコピー＆ペーストする方法で作成します。
手順 2. タブレット＆モバイル用の画像を差し替える
複製したボックスに、タブレット以下の画面サイズ用の画像を設定します。
複製した画像ボックスを選択します。
画像をダブルクリックします。
左パネルで展開する[アップロード＆置き換え]パネルから、画像を変更します。
外観やレイアウトの変更が必要であれば、調整をします。
手順 3. ボックスの表示設定でPC用・タブレット＆モバイル用の表示を切り替える
PC用・ タブレット＆モバイル用それぞれのボックスに対して、ブレイクポイントごとに表示・非表示を設定します。
レイヤーパネルを開きます。
1・2で作成したタブレット＆モバイル用の画像ボックスの親ボックスにカーソルを合わせ、右側に表示される目のアイコン
（表示設定）をクリックします。非表示にしたいデバイスサイズ（[デフォルト]、[スモール]など）を選び、チェックを外します。
次に、の親ボックスにカーソルを合わせ、右側に表示される目のアイコン
（表示設定）をクリックします。非表示にしたいデバイスサイズ（[タブレット]、[モバイル]、[ミニ]など）を選び、チェックを外します。
手順 4. 動作確認
設定した内容が意図したとおりに動作しているか、公開前に確認します。
ツールバー下部のツールバーで、[デフォルト][タブレット][モバイル]などのブレイクポイントを順にクリックし、それぞれの画面幅で表示される画像が切り替わることを確認します。
必要に応じてライブプレビューでもレスポンシブデザインが反映されているか確認します。
公開中のサイトを編集している場合には、サイトを更新して公開サイトに編集内容を反映します。