PCサイズで横に配置された画像をスマホサイズで縦に交互に配置させたい。

概要
PCサイズで横に赤い画像を３つ、そして、その下にさらに青い画像を３つを並べるコードを書いたのですが、これをスマホサイズで縦表示は出来たのですが、付属画像のようにスマホサイズで画像を赤と青交互に縦に並べるようにしたいのですが、どうしたらよいでしょうか？

PCでは赤横3列、青横３列でこの配置でOKです。
スマホ配置で縦に赤赤赤青青青→赤青赤青赤青にしたいです。縦並びにはなってます。

html
1<!DOCTYPE html>
2
3<html lang="ja">
4
5<head>
6	<meta content="text/html; charset=utf-8" />
7	<meta name="viewport" content="width=device-width, initial-scale=1">
8	
9  <link rel="stylesheet" href="mouthlp.css">
10
11	<title>コード</title>
12
13 <style>
14
15</style>
16</head>
17<body>
18
19    <div class="wrap0001">
20        <div class="item">
21         
22          <img src="red1.png" alt="［背景］" class="slide-right show" id="gazouB">
23        </div>
24      
25        <div class="item">
26          <img src="red2.png" alt="［背景］" class="slide-right show" id="gazouB">
27          
28        </div>
29        <div class="item">
30          <img src="red3.png" alt="［背景］" class="slide-right show" id="gazouB">
31          
32        </div>
33    </div>
34
35    <div class="wrap0001">
36      <div class="item">
37       
38        <img src="blue1.png" alt="［背景］" class="slide-right show" id="gazouB">
39      </div>
40    
41      <div class="item">
42        <img src="blue2.png" alt="［背景］" class="slide-right show" id="gazouB">
43        
44      </div>
45      <div class="item">
46        <img src="blue3.png" alt="［背景］" class="slide-right show" id="gazouB">
47        
48      </div>
49  </div>
50
51    </body>
52    </html>

mouthlp.css

css
1 /* PCで縦から横ならびにdisplay: flex; */
2.wrap0001 {
3  display: flex;
4  background-color: rgb(19, 244, 79);
5 
6}
7
8.item {
9 
10  width: 33.3%;
11  text-align: center;
12  
13}
14
15/* 画面幅（400px以下の時までの適応）指定 */
16@media screen and (max-width: 400px){
17
18   /* 画像B */
19   #gazouA{
20    width:270px;
21    height: 300px;
22    
23    text-align: center;
24    
25    }
26    /* 画像B */
27    #gazouB{
28    width:270px;
29    height: 300px;
30    
31    text-align: center;
32    }
33
34 /* スマホサイズ横から縦ににdisplay: flex;→ display: block; */
35 .wrap0001 {
36  display: block;
37  background-color: rgb(19, 244, 79);
38 
39}
40
41.item {
42 
43  width: 100%;/* スマホサイズで縦に真ん中表示50%→100%*/
44  text-align: center;
45  
46}
47
48  }

行動規範の内容に同意します

回答1件

ベストアンサー

HTML構造をそのままにするならばこんな感じでは。

css
1  body { /* body直下の場合 */
2    display: flex;
3    flex-wrap: wrap;
4  }
5
6  .wrap0001 {
7    display: contents;
8  }
9
10  .wrap0001:nth-child(1) .item:nth-child(1) {
11    order: 1;
12  }
13
14  .wrap0001:nth-child(1) .item:nth-child(2) {
15    order: 3;
16  }
17
18  .wrap0001:nth-child(1) .item:nth-child(3) {
19    order: 5;
20  }
21
22  .wrap0001:nth-child(2) .item:nth-child(1) {
23    order: 2;
24  }
25
26  .wrap0001:nth-child(2) .item:nth-child(2) {
27    order: 4;
28  }
29
30  .wrap0001:nth-child(2) .item:nth-child(3) {
31    order: 6;
32  }