スマホサイズの時、赤と青の画像を交互に縦並びしたいです。

概要

PCサイズで赤い画像3つと青い画像3つがそれぞれ横に３つずつ並んでいるのですが、これをスマホサイズ400px以下の時に、縦に、赤青赤青赤青と交互に並ぶようにしたいです。
今までスマホサイズで赤青と交互にきちんと縦に並んでいたのですが、何故か交互並びが、適応されなくなってしまいました。

複数投稿しています。理由。多様な解決方法を知るため。
以下リンク
https://okwave.jp/qa/q9997505.html
https://oshiete.goo.ne.jp/qa/12894668.html

コードの説明
HTMLのコードとbasic.cssと４００ｐｘ以下のcss ,２０００ｐｘ以下のレスポンシブｃｓｓがあります。
ＰＣサイズ2000ｐｘ以下、(2000ｐｘ以下のみ）です。ではwidth80%の範囲内に１列目に赤赤赤と３つ画像が並んでいます。そして、その下に青青青と３つ画像が並んでいて、その画像の背景にパパラックス背景（ぼかしありparallax-bg2）を適応しています。そして、さらに残りの**width20%**に両脇の隙間にもパパラックス背景（ぼかし無しparallax-bg3）を適応しています。

実際のサイトのURLです。
https://rensyuu12.tokyo/PHPMailer/abab.html

ＰＣでの表示　1800pxの時　画像

スマホ表示の時にこのようにしたいです。

html
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5	<meta content="text/html; charset=utf-8" />
6	<meta name="viewport" content="width=device-width, initial-scale=1">
7  <link rel="stylesheet" href="basic.css">
8  <link rel="stylesheet" href="2000px.css">
9  <link rel="stylesheet" href="400px.css">
10	<title>a</title>
11   
12<style>
13</style>
14
15</head>
16<body>
17
18<!--1500px以上のみ左右にパパラックス適応parallax-bg3-->
19<div class="parallax-bg3">
20<!--スマホサイズで縦に折り返し交互配置div id="me"　flexで直下を指定する-->
21<div id="me">
22  <!--PCで横並び３つの赤い画像-->
23  <div class="wrap0001">
24    
25    <div class="item2 parallax-bg2"><!--ぼかし画像のパパラックス適応parallax-bg2-->
26    <img src="red1.png" alt="1" id="hukidasi" class="">
27      
28    </div>
29  
30    <div class="item2 parallax-bg2">
31    <img src="red2.png" alt="2" id="hukidasi2" class="">
32    </div>
33
34    <div class="item2 parallax-bg2">
35    <img src="red3.png" alt="3" id="hukidasi3" class="">
36    
37    </div>
38  </div>
39</div>
40
41
42<!--1500px以上のみ左右にパパラックス適応parallax-bg3-->
43<div class="parallax-bg3">
44  <!--PCで横並び３つの青い画像-->
45  <div class="wrap0001">
46
47    <div class="item2 parallax-bg2"><!--ぼかし画像のパパラックス適応parallax-bg2-->
48      <img src="blue1.png" alt="" id="sumaho3" class="">
49      </div>
50
51      <div class="item2 parallax-bg2">
52        <img src="blue2.png" alt="" id="sumaho4" class="">
53    </div>
54      
55    <div class="item2 parallax-bg2">
56      <img src="blue3.png" alt="" id="sumaho5" class="">
57      </div> 
58
59    </div>
60    </div>
61  </div>
62
63
64</body>
65</html>

basic.css

css
1/* PCで縦から横ならびにdisplay: flex; */
2.wrap0001 {
3  display: flex;
4 
5}
6.item2 {
7  width: 33.3%;
8  text-align: center;
9  
10}
11/* 左の赤い画像 */
12#hukidasi{
13width:200px;
14height: 140px;
15margin-left:80px ;
16}
17/* 真ん中の赤い画像 */
18#hukidasi2{
19width:200px;
20height: 140px;
21margin-left:70px ;
22}
23/* 左の赤い画像 */
24#hukidasi3{
25width:200px;
26height: 140px;
27margin-left:80px ; 
28}
29
30  /* 左の青い画像 */
31  #sumaho3{
32    width:220px;
33    height: 300px;
34    margin-left: 50px;
35    margin-top: 8px;
36    }
37  
38  /* 真ん中の青い画像 */
39  #sumaho4{
40    width:220px;
41    height: 300px;
42    margin-left: 25px;
43    margin-top: 8px;
44    }
45  
46  /* 左の青い画像 */
47  #sumaho5{
48    width:220px;
49    height: 300px;
50    margin-top: 8px;
51    }
52/*パパラックスぼかし画像*/
53   .parallax-bg2 {
54     background-image: url('48mouth.png');
55     background-attachment: fixed;
56     background-position: center;
57     background-size: cover;
58     background-repeat: no-repeat;
59   }
60}
61  
62  
63

400px.css　レスポンシブ400px以下

css
1/* 画面幅（400px以下の時までの適応）指定 */
2@media screen and (max-width: 400px){
3
4/* スマホサイズ横３つから縦に並べる　赤赤赤、青青青→赤青赤青赤青に縦に */
5/* スマホサイズ横から縦ににdisplay: flex;→ display: block; */
6     
7/* 画像交互縦並び */
8     #me { /* me直下の場合<div id="me">を作る */
9      display: flex;
10      flex-wrap: wrap;
11     
12     }
13     .wrap0001 {
14      display: contents;
15     }
16     
17     .wrap0001:nth-child(1) .item2:nth-child(1) {
18      order: 1;
19     }
20     
21     .wrap0001:nth-child(1) .item2:nth-child(2) {
22      order: 3;
23     }
24     
25     .wrap0001:nth-child(1) .item2:nth-child(3) {
26      order: 5;
27     }
28     
29     .wrap0001:nth-child(2) .item2:nth-child(1) {
30      order: 2;
31     }
32     
33     .wrap0001:nth-child(2) .item2:nth-child(2) {
34      order: 4;
35     }
36     
37     .wrap0001:nth-child(2) .item2:nth-child(3) {
38      order: 6;
39     }
40     .item2 {
41     
42      width: 100%;/* スマホサイズで縦に真ん中表示*/
43      text-align: center;
44      
45      
46     }
47    
48     /* 左の赤い画像 */
49     #hukidasi{
50      width:200px;
51      height: 140px;
52      margin: 0 auto;/* スマホサイズ中央配置 */
53      }
54      /* 真ん中の赤い画像 */
55      #hukidasi2{
56      width:200px;
57      height: 140px;
58      margin: 0 auto; /* スマホサイズ中央配置 */ 
59      }
60       /* 右の赤い画像 */
61      #hukidasi3{
62      width:200px;
63      height: 140px;
64      margin: 0 auto;/* スマホサイズ中央配置 */    
65      }
66      
67        
68      /* 左の青い画像 */
69        #sumaho3{
70          width:200px;
71          height: 140px;
72          margin: 0 auto;/* スマホサイズ中央配置 */
73          }
74        
75        /* 真ん中の青い画像*/
76        #sumaho4{
77          width:200px;
78          height: 140px;
79        margin: 0 auto;/* スマホサイズ中央配置 */
80          
81          }
82        
83        
84        /* 右の青い画像 */
85        #sumaho5{
86          width:200px;
87          height: 140px;
88          margin: 0 auto;/* スマホサイズ中央配置 */
89          }
90
91 /*パパラックスぼかし画像*/
92   .parallax-bg2 {
93     background-image: url('48mouth.png');
94     background-attachment: fixed;
95     background-position: center;
96     background-size: cover;
97     background-repeat: no-repeat;
98   }
99        }
100       
101       
102       
103       
104

2000px.css　レスポンシブ2000px以下

css
1/* 画面幅（2000px以下の時までの適応）指定 */
2@media screen and (max-width: 2000px){
3
4     /* PCで縦から横ならびにdisplay: flex; */
5   .wrap0001 {
6     display: flex;
7     width: 80%;/* ※※PCサイズ1500以上80%の中で３分割item2 33.3% */
8     margin: 0 auto;
9    
10   }
11   
12   .item2 {
13     width: 33.3%;/* ※※PCサイズ1500以上80%の中で３分割item2 33.3% */
14     text-align: center; 
15   }
16     
17   /* 右の赤い画像 */
18   #hukidasi{
19   width:200px;
20   height: 140px;
21   margin-left:0px ;
22   }
23    /* 真ん中の赤い画像 */
24   #hukidasi2{
25   width:200px;
26   height: 140px;
27   margin-left:0px ;
28  
29   }
30    /* 左の赤い画像 */
31   #hukidasi3{
32   width:200px;
33   height: 140px;
34   margin-left:0px ;
35   
36   }
37  
38     /* 左の青い画像*/
39     #sumaho3{
40       width:200px;
41       height: 140px;
42       margin-left: 0px;
43       margin-top: 8px;
44       }
45     
46     /* 真ん中の青い画像 */
47     #sumaho4{
48       width:200px;
49       height: 140px;
50       margin-left: 5px;
51       margin-top: 8px;
52       }
53     
54     /* 右の青い画像 */
55     #sumaho5{
56       width:200px;
57       height: 140px;
58       margin-top: 8px;
59       }
60 
61   /*パパラックスぼかし画像*/
62   .parallax-bg2 {
63     background-image: url('48mouth.png');
64     background-attachment: fixed;
65     background-position: center;
66     background-size: cover;
67     background-repeat: no-repeat;
68   }
69     /*※1500以上のみ両脇表示　ぼかし無しパパラックス画像*/
70     .parallax-bg3 {
71       background-image: url('45mouth.png');
72       background-attachment: fixed;
73       background-position: center;
74       background-size: cover;
75       background-repeat: no-repeat;
76     }
77   }
78   
79   
80   
81   
82   
83   
84   
85

1T2R3M4

2022/04/11 05:46

https://okwave.jp/qa/q9997505.html https://oshiete.goo.ne.jp/qa/12894668.html 以下ご対応ください。 https://teratail.com/help#posted-otherservice

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

回答2件

自己解決

HTMLに直接スタイルを書き込む形にしました。少し複雑にはなりましたが、配置したいようにはなりました。
以下コード　HTMLコードのみに以下を追加　変更
ーーーーーーーーー
全6箇所
1)

<div class="parallax-bg3" style="display: contents;">

<div class="item2 parallax-bg2" style="order: 6;"> ーーーーーーーーー

html
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5	<meta content="text/html; charset=utf-8" />
6	<meta name="viewport" content="width=device-width, initial-scale=1">
7  <link rel="stylesheet" href="basic.css">
8  <link rel="stylesheet" href="2000px.css">
9  <link rel="stylesheet" href="400px.css">
10	<title>a</title>
11   
12<style>
13</style>
14
15</head>
16<body>
17  
18<!--1500px以上のみ左右にパパラックス適応parallax-bg3-->
19<div class="parallax-bg3" style="display: flex;flex-flow: column;">
20<!--スマホサイズで縦に折り返し交互配置div id="me"　flexで直下を指定する-->
21<div id="me" style="display: contents;">
22<!--1500px以上のみ左右にパパラックス適応parallax-bg3-->
23  <div class="parallax-bg3" style="display: contents;">
24  <!--PCで横並び３つの赤い画像-->
25  <div class="wrap0001">
26    
27    <div class="item2 parallax-bg2" style="order: 2;"><!--ぼかし画像のパパラックス適応parallax-bg2-->
28    <img src="red1.png" alt="1" id="hukidasi" class="">
29      
30    </div>
31  
32    <div class="item2 parallax-bg2" style="order: 4;">
33    <img src="red2.png" alt="2" id="hukidasi2" class="">
34    </div>
35
36    <div class="item2 parallax-bg2" style="order: 6;">
37    <img src="red3.png" alt="3" id="hukidasi3" class="">
38    
39    </div>
40  </div>
41  </div>
42
43
44
45 
46
47  <!--1500px以上のみ左右にパパラックス適応parallax-bg3-->
48    <div class="parallax-bg3" style="display: contents;">
49    <!--PCで横並び３つの赤い画像-->
50    <div class="wrap0001">
51
52    <div class="item2 parallax-bg2"><!--ぼかし画像のパパラックス適応parallax-bg2-->
53      <img src="blue1.png" alt="" id="sumaho3" class="">
54      </div>
55
56      <div class="item2 parallax-bg2">
57        <img src="blue2.png" alt="" id="sumaho4" class="">
58    </div>
59      
60    <div class="item2 parallax-bg2">
61      <img src="blue3.png" alt="" id="sumaho5" class="">
62      </div> 
63
64    </div>
65    </div>
66  </div>
67</div>
68
69
70</body>
71</html>

レスポンシブ400px以下

css
1/* 画面幅（400px以下の時までの適応）指定 */
2@media screen and (max-width: 400px){
3
4/* スマホサイズ横３つから縦に並べる　赤赤赤、青青青→赤青赤青赤青に縦に */
5/* スマホサイズ横から縦ににdisplay: flex;→ display: block; */
6     
7/* 画像交互縦並び */
8     #me { /* me直下の場合<div id="me">を作る */
9      display: flex;
10      flex-wrap: wrap;
11     
12     }
13
14     
15     .wrap0001 {
16      display: contents;
17     }
18     
19     .wrap0001:nth-child(1) .item2:nth-child(1) {
20      order: 1;
21     }
22     
23     .wrap0001:nth-child(1) .item2:nth-child(2) {
24      order: 3;
25     }
26     
27     .wrap0001:nth-child(1) .item2:nth-child(3) {
28      order: 5;
29     }
30     
31     .wrap0001:nth-child(2) .item2:nth-child(1) {
32      order: 2;
33     }
34     
35     .wrap0001:nth-child(2) .item2:nth-child(2) {
36      order: 4;
37     }
38     
39     .wrap0001:nth-child(2) .item2:nth-child(3) {
40      order: 6;
41     }
42     .item2 {
43     
44      width: 100%;/* スマホサイズで縦に真ん中表示*/
45      text-align: center;
46      
47      
48     }
49    
50     /* 左の赤い画像 */
51     #hukidasi{
52      width:200px;
53      height: 140px;
54      margin: 0 auto;/* スマホサイズ中央配置 */
55      }
56      /* 真ん中の赤い画像 */
57      #hukidasi2{
58      width:200px;
59      height: 140px;
60      margin: 0 auto; /* スマホサイズ中央配置 */ 
61      }
62       /* 右の赤い画像 */
63      #hukidasi3{
64      width:200px;
65      height: 140px;
66      margin: 0 auto;/* スマホサイズ中央配置 */    
67      }
68      
69        
70      /* 左の青い画像 */
71        #sumaho3{
72          width:200px;
73          height: 140px;
74          margin: 0 auto;/* スマホサイズ中央配置 */
75          }
76        
77        /* 真ん中の青い画像*/
78        #sumaho4{
79          width:200px;
80          height: 140px;
81        margin: 0 auto;/* スマホサイズ中央配置 */
82          
83          }
84        
85        
86        /* 右の青い画像 */
87        #sumaho5{
88          width:200px;
89          height: 140px;
90          margin: 0 auto;/* スマホサイズ中央配置 */
91          }
92        }
93       
94       
95       
96       
97

レスポンシブ2000px以下

css
1/* 画面幅（2000px以下の時までの適応）指定 */
2@media screen and (max-width: 2000px){
3
4     /* PCで縦から横ならびにdisplay: flex; */
5   .wrap0001 {
6     display: flex;
7     width: 80%;/* ※※PCサイズ1500以上80%の中で３分割item2 33.3% */
8     margin: 0 auto;
9     
10    
11   }
12   
13   .item2 {
14     width: 33.3%;/* ※※PCサイズ1500以上80%の中で３分割item2 33.3% */
15     text-align: center; 
16   }
17     
18   
19   /* 右の赤い画像 */
20   #hukidasi{
21   width:200px;
22   height: 140px;
23   margin-left:0px ;
24   }
25    /* 真ん中の赤い画像 */
26   #hukidasi2{
27   width:200px;
28   height: 140px;
29   margin-left:0px ;
30  
31   }
32    /* 左の赤い画像 */
33   #hukidasi3{
34   width:200px;
35   height: 140px;
36   margin-left:0px ;
37   
38   }
39  
40     /* 左の青い画像*/
41     #sumaho3{
42       width:200px;
43       height: 140px;
44       margin-left: 0px;
45       margin-top: 8px;
46       }
47     
48     /* 真ん中の青い画像 */
49     #sumaho4{
50       width:200px;
51       height: 140px;
52       margin-left: 5px;
53       margin-top: 8px;
54       }
55     
56     /* 右の青い画像 */
57     #sumaho5{
58       width:200px;
59       height: 140px;
60       margin-top: 8px;
61       }
62 
63   /*パパラックスぼかし画像*/
64   .parallax-bg2 {
65     background-image: url('48mouth.png');
66     background-attachment: fixed;
67     background-position: center;
68     background-size: cover;
69     background-repeat: no-repeat;
70   }
71     /*※1500以上のみ両脇表示　ぼかし無しパパラックス画像*/
72     .parallax-bg3 {
73       background-image: url('45mouth.png');
74       background-attachment: fixed;
75       background-position: center;
76       background-size: cover;
77       background-repeat: no-repeat;
78     }
79   }
80

basic.css

css
1/* PCで縦から横ならびにdisplay: flex; */
2.wrap0001 {
3  display: flex;
4 
5}
6.item2 {
7  width: 33.3%;
8  text-align: center;
9  
10}
11/* 左の赤い画像 */
12#hukidasi{
13width:200px;
14height: 140px;
15margin-left:80px ;
16}
17/* 真ん中の赤い画像 */
18#hukidasi2{
19width:200px;
20height: 140px;
21margin-left:70px ;
22}
23/* 左の赤い画像 */
24#hukidasi3{
25width:200px;
26height: 140px;
27margin-left:80px ; 
28}
29
30  /* 左の青い画像 */
31  #sumaho3{
32    width:220px;
33    height: 300px;
34    margin-left: 50px;
35    margin-top: 8px;
36    }
37  
38  /* 真ん中の青い画像 */
39  #sumaho4{
40    width:220px;
41    height: 300px;
42    margin-left: 25px;
43    margin-top: 8px;
44    }
45  
46  /* 左の青い画像 */
47  #sumaho5{
48    width:220px;
49    height: 300px;
50    margin-top: 8px;
51    }
52  
53

投稿2022/04/11 07:44

gujhufiugho

総合スコア245

今までスマホサイズで赤青と交互にきちんと縦に並んでいたのですが、何故か交互並びが、適応されなくなってしまいました。

CSSを拝見した感じ、上手く表示がいっていた時は下記のような構造だったのではないでしょうか？

HTML
1<div id="me">
2
3  <div class="wrap0001">
4
5    <div class="item2 parallax-bg2">
6      <img src="red1.png" alt="1" id="hukidasi" class="">
7    </div>
8
9    <div class="item2 parallax-bg2">
10      <img src="red2.png" alt="2" id="hukidasi2" class="">
11    </div>
12
13    <div class="item2 parallax-bg2">
14      <img src="red3.png" alt="3" id="hukidasi3" class="">
15    </div>
16
17  </div>
18
19  <div class="wrap0001">
20
21    <div class="item2 parallax-bg2">
22      <img src="blue1.png" alt="" id="sumaho3" class="">
23    </div>
24
25    <div class="item2 parallax-bg2">
26      <img src="blue2.png" alt="" id="sumaho4" class="">
27    </div>
28
29    <div class="item2 parallax-bg2">
30      <img src="blue3.png" alt="" id="sumaho5" class="">
31    </div>
32
33  </div>
34
35</div>