スマホ画面では画像を縦並びにしたい

前提・実現したいこと

横並びの画像をスマホ画面のサイズになると縦並びになるようにしたいです。

該当のソースコード

html
1<div class="wrap">
2<figure class="snip1445">
3  <img src="images/ew01.jpg" alt="sample84" />
4  <figcaption>
5    <div>
6      <h2>電気工事</h2>
7      <h4>MORE</h4>
8    </div>
9  </figcaption>
10  <a href="electric work.html"></a>
11</figure>
12	
13<figure class="snip1445">
14  <img src="images/wp01.jpg" alt="sample84" />
15  <figcaption>
16    <div>
17      <h2>風力発電</h2>
18      <h4>MORE</h4>
19    </div>
20  </figcaption>
21  <a href="wind power.html"></a>
22</figure>
23	
24<figure class="snip1445">
25  <img src="images/ed01.jpg" alt="sample84" />
26  <figcaption>
27    <div>
28      <h2>電気設計</h2>
29      <h4>MORE</h4>
30    </div>
31  </figcaption>
32  <a href="electric design.html"></a>
33</figure>
34	
35<figure class="snip1445">
36  <img src="images/md01.jpg" alt="sample84" />
37  <figcaption>
38    <div>
39      <h2>機械設計</h2>
40      <h4>MORE</h4>
41    </div>
42  </figcaption>
43  <a href="machine design.html"></a>
44</figure>
45
46</div>

css
1.wrap {
2  display: flex;
3  justify-content: center;
4  background: url(technology.png) top center no-repeat, linear-gradient(#117000, #489E3C);
5  padding: 60px 22px 25px;
6}
7
8.snip1445 {
9  font-family: 'Raleway', Arial, sans-serif;
10  position: relative;
11  overflow: hidden;
12  margin: 8px;
13  min-width: 230px;
14  max-width: 315px;
15  width: 100%;
16  color: #ffffff;
17  text-align: center;
18  font-size: 16px;
19  background-color: #000000;
20}
21.snip1445 *,
22.snip1445 *:before,
23.snip1445 *:after {
24  -webkit-box-sizing: border-box;
25  box-sizing: border-box;
26  -webkit-transition: all 0.55s ease;
27  transition: all 0.55s ease;
28}
29.snip1445 img {
30  max-width: 100%;
31  backface-visibility: hidden;
32  vertical-align: top;
33}
34.snip1445 figcaption {
35  position: absolute;
36  bottom: 15px;
37  right: 15px;
38  padding: 5px 10px 10px;
39}
40.snip1445 figcaption:before,
41.snip1445 figcaption:after {
42  height: 2px;
43  width: 400px;
44  position: absolute;
45  content: '';
46  background-color: #ffffff;
47}
48.snip1445 figcaption:before {
49  top: 0;
50  left: 0;
51  -webkit-transform: translateX(100%);
52  transform: translateX(100%);
53}
54.snip1445 figcaption:after {
55  bottom: 0;
56  right: 0;
57  -webkit-transform: translateX(-100%);
58  transform: translateX(-100%);
59}
60.snip1445 figcaption div:before,
61.snip1445 figcaption div:after {
62  width: 2px;
63  height: 300px;
64  position: absolute;
65  content: '';
66  background-color: #ffffff;
67}
68.snip1445 figcaption div:before {
69  top: 0;
70  left: 0;
71  -webkit-transform: translateY(100%);
72  transform: translateY(100%);
73}
74.snip1445 figcaption div:after {
75  bottom: 0;
76  right: 0;
77  -webkit-transform: translateY(-100%);
78  transform: translateY(-100%);
79}
80.snip1445 h2,
81.snip1445 h4 {
82  margin: 0;
83  text-transform: uppercase;
84}
85.snip1445 h2 {
86  font-weight: 400;
87}
88.snip1445 h4 {
89  display: block;
90  font-weight: 700;
91  background-color: #ffffff;
92  padding: 5px 10px;
93  color: #000000;
94}
95.snip1445 a {
96  position: absolute;
97  top: 0;
98  bottom: 0;
99  left: 0;
100  right: 0;
101}
102.snip1445:hover img,
103.snip1445.hover img {
104  zoom: 1;
105  filter: alpha(opacity=50);
106  -webkit-opacity: 0.5;
107  opacity: 0.5;
108}
109.snip1445:hover figcaption:before,
110.snip1445.hover figcaption:before,
111.snip1445:hover figcaption:after,
112.snip1445.hover figcaption:after,
113.snip1445:hover figcaption div:before,
114.snip1445.hover figcaption div:before,
115.snip1445:hover figcaption div:after,
116.snip1445.hover figcaption div:after {
117  -webkit-transform: translate(0, 0);
118  transform: translate(0, 0);
119}
120.snip1445:hover figcaption:before,
121.snip1445.hover figcaption:before,
122.snip1445:hover figcaption:after,
123.snip1445.hover figcaption:after {
124  -webkit-transition-delay: 0.15s;
125  transition-delay: 0.15s;
126}

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

回答1件

ベストアンサー

下記でいかがでしょうか。。
（flex-wrap: wrap;追記。flex要素で折り返し指定）

css
1
2wrap {
3    display: flex;
4    justify-content: center;
5    background: url(technology.png) top center no-repeat, linear-gradient(#117000, #489E3C);
6    padding: 60px 22px 25px;
7    width: 100%;
8    flex-wrap: wrap;
9}