スマホとPCで別の画像をランダムで表示する方法

wordpressでコーポレートサイトを作っています。
表題の件が実装できずに困っています。

ランダムで画像を表示するところまではいけたのですが、
ブラウザ幅によって切り分けるにはどうしたらいいでしょうか？
最悪cssのbackgroundで対処しようかと考えています。

該当のソースコード

php
1		<?php
2		// 配列をランダムに並び替える
3		$random = range( 1,3 );
4		shuffle( $random );
5
6		// 表示したい数分、配列の要素の値を取ってくる
7		for( $i=0; $i<=2; $i++ ){
8			$number[$i+1] = $random[$i];
9		}
10		?>
11			
12			<?php if($number[1] == 1) :?>
13							<img src="<?php echo get_field('page-slide-image-1');?>" alt="slide1">
14			<?php elseif($number[1] == 2):?>
15							<img src="<?php echo get_field('page-slide-image-2');?>" alt="slide2">
16			<?php elseif($number[1] == 3):?>
17							<img src="<?php echo get_field('page-slide-image-3');?>" alt="slide3">
18			<?php endif ;?>
19
20			<?php if($number[2] == 1) :?>
21							<img src="<?php echo get_field('page-slide-image-1');?>" alt="slide1">
22			<?php elseif($number[2] == 2):?>
23							<img src="<?php echo get_field('page-slide-image-2');?>" alt="slide2">
24			<?php elseif($number[2] == 3):?>
25							<img src="<?php echo get_field('page-slide-image-3');?>" alt="slide3">
26			<?php endif ;?>
27
28			<?php if($number[3] == 1) :?>
29							<img src="<?php echo get_field('page-slide-image-1');?>" alt="slide1">
30			<?php elseif($number[3] == 2):?>
31							<img src="<?php echo get_field('page-slide-image-2');?>" alt="slide2">
32			<?php elseif($number[3] == 3):?>
33							<img src="<?php echo get_field('page-slide-image-3');?>" alt="slide3">
34			<?php endif ;?>

kei344

2020/04/09 02:52

（質問文は編集できます）PCの画像とスマホの画像がコードのどの部分かわかりません。

pondesu

2020/04/09 03:04

すみません、今のところPCの画像しか表示できていない状態です。カスタムフィールドに登録した3つのＰＣ用画像を呼び出しています。 <img src="<?php echo get_field('page-slide-image-1');?>" alt="slide1"> <img src="<?php echo get_field('page-slide-image-2');?>" alt="slide1"> <img src="<?php echo get_field('page-slide-image-3');?>" alt="slide1">