レスポンシブ対応で表示を縦にしたい

isara のhpを模写してHTML、CSSの練習をしています。
一旦パソコン用のサイトを作ったのですが、タブレット、スマホ対応しようとした時に、
class 名　aboutsecondのstepboxを縦一列にしたいです。
今は、displey:flex;が効いており、横一列になっています。
@media内でdisplay:flex;を消すことはできないのでしょうか？

↑これを

↑こうしたい
よろしくお願いします。

html
1コード<!DOCTYPE html>
2<html lang="ja" dir="ltr">
3  <head>
4    <meta charset="utf-8">
5    <link rel="stylesheet" href="style.css">
6    <link rel="stylesheet" href="responsive.css">
7    <meta name="viewport" content="widht=device=device-width,initial-scale=1">
8    <title>isara copy</title>
9  </head>
10  <body>
11    <header>
12      <div class="header-in">
13       <img src="../img/isaralogo.png" alt="isara" height="45" width="128">
14       <p>バンコクのノマドエンジニア育成講座</p>
15       <div class="btn">
16       <a href="">お問い合わせ/資料請求はこちら</a>
17       </div>
18       <div class="btn4">
19         <a href="">資料請求</a>
20       </div>
21      </div>
22    </header>
23    <div class="isaratop">
24      <h1 class="txtl">プログラミングで<br>人生の安定を手にいれよう</h1>
25      <img src="../img/isaralogo.png" alt="isara" width="317" height="111">
26      <p class="txtm">バンコクのノマドエンジニア育成講座<br>iSara[イサラ]</p>
27    </div>
28    <div class="ask">
29      <p class="txtm">まずは２０日間で、<br>月１０万円稼げるスキルを手にいれよう。</p>
30      <p class="ask-point">※受講料金は実質０円です。詳しくは資料請求をどうぞ。</p>
31       <div class="btn2">
32        <a href="">お問い合わせ/資料請求はこちら</a>
33       </div>
34       <div class="kisei">
35         <h2>第６期生：2019年11月25日 ~ 2019年12月14日＊締め切りました</h2>
36         <h2>第７期生：2020年2月17日 ~ 2019年3月7日＊締め切りました</h2>
37         <h2>第8期生：2020年4月〜5月ごろを予定＊資料請求受付中です</h2>
38       </div>
39       <div class="sns">
40         <a href="https://twitter.com/share?ref_src=twsrc%5Etfw" class="twitter-share-button" data-show-count="false">ツイート</a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
41         <iframe src="https://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F&width=135&layout=button&action=like&size=small&share=true&height=65&appId" width="135" height="20" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allow="encrypted-media"></iframe>
42
43       </div>
44
45     </div>
46     <div class="freedom">
47       <div class="txtbox">
48         <p class="txtl">エンジニアとして本当の自由を手に入れるためには？</p>
49       </div>
50       <div class="freedam-text">
51         <p class="txtm">エンジニア需要の高まりに伴い、プログラミングスクールが増えています。</p>
52          <p class="txtm">しかしそこでの学習の先は、 提携して決められた就職先に就職すること。</p><br>
53          <p class="txtm">これで本当にいいのですか？</p>
54          <p class="txtm">日本人エンジニアはアメリカと較べて給料が格段に低い。</p>
55          <p class="txtm">その理由がここにあり、 エンジニアは自分の給料をコントロールすべきなのです。</p><br>
56          <p class="txtm">スキルを身につけたエンジニアは、人生をコントロールすることでより自由に。</p>
57          <p class="txtm">そこで必要なのが <span class="underline">「稼ぐ力」</span>です。</p>
58
59
60       </div>
61       <div class="about-btn">
62         <p>About</p>
63       </div>
64     </div>
65     <div class="about">
66       <div class="txtbox">
67         <p class="txtl">ノマドエンジニア育成講座<br>iSara[イサラ]とは</p>
68       </div>
69       <p class="txtm">「 稼ぐこと 」にフォーカスしたWebエンジニア育成講座です。</p>
70       <div class="about-box">
71         <p class="txtm">稼げるエンジニアに必要な５つのスキルとは？</p>
72         <div class="flex">
73           <div class="picturebox">
74             <img src="../img/skill.jpg" widht="57" height="61">
75             <p>基礎的な<br>プログラミングスキル</p>
76           </div>
77           <div class="picturebox">
78             <img src="../img/sales.jpg" widht="57" height="61">
79             <p>案件獲得に必要な<br>営業力</p>
80           </div>
81           <div class="picturebox">
82             <img src="../img/document.jpg" widht="57" height="61">
83             <p>見積もり作成から<br>納品までの知識</p>
84           </div>
85           <div class="picturebox">
86             <img src="../img/plusone.jpg" widht="57" height="61">
87             <p>自分の付加価値を<br>高めるスキル</p>
88           </div>
89           <div class="picturebox">
90             <img src="../img/connection.jpg" widht="57" height="61">
91             <p>フリーランス同士の<br>横のつながり</p>
92           </div>
93         </div>
94
95       </div>
96
97     </div>
98     <div class="aboutsecond">
99       <h1>iSaraで「基本的なプログラミングスキル」は教えません</h1>
100       <h2>基礎的なプログラミングスキルは無料で学べる時代。</h2>
101       <h2>iSaraでは、基礎知識学習は<span class="about-second-txt">事前課題</span>と<span class="about-second-txt">チャットサポート</span>のみ。</h2>
102<!-- /////////不明な箇所はここです/////////
103レスポンシブ サイトで表示を中央縦一列にしたい-->
104 
105       <div class="container">
106       <div class="stepbox">
107         <p class="step">STEP.1</p>
108         <p class="txts">【バンコク渡航前１ヶ月】</p>
109         <p class="txtms">事前課題で基礎知識を学ぶ</p>
110       </div>
111       <div class="stepbox">
112         <p class="step">STEP.2</p>
113         <p class="txts">【バンコク到着後】</p>
114         <p class="txtms">実践的に稼ぐことに特化した学習</p>
115       </div>
116       <div class="stepbox">
117         <p class="step">STEP.3</p>
118         <p class="txts">【バンコク帰国後】</p>
119         <p class="txtms">講座実施後の案件獲得サポート</p>
120       </div>
121       </div>
122     </div>
123<!-- /////////ここまで/////////-->
124
125    
126
127
128  </body>
129</html>

CSS
1コード@charset "utf-8";
2
3body{
4  margin:0;
5  color:#333;
6}
7header{
8  height:70px;
9}
10p, h1, h2{
11  text-align: center;
12  margin:0;
13}
14.txtl{
15  font-size:24px;
16  font-weight: 600;
17  margin-bottom: 10px;
18}
19.txtm{
20  font-size:20px;
21  margin-bottom: 10px;
22}
23.header-in p{
24  margin:0;
25  display: inline-block;
26}
27header img{
28  vertical-align: bottom;
29}
30.header-in{
31  width:100%;
32  position: fixed;
33  top:0;
34  background-color: #ffffff;
35  padding:15px 50px;
36  z-index: 10;
37}
38
39.btn{
40  width:318px;
41  height:44px;
42  border:1px solid #d86c67;
43  background-color: #d86c67;
44  border-radius: 25px;
45  text-align: center;
46  display: inline-block;
47  float:right;
48  margin-right: 70px;
49}
50.btn4{
51  display: none;
52}
53.btn a{
54  text-decoration: none;
55  color:#ffffff;
56  font-size:14px;
57  display: block;
58  height:100%;
59  padding-top:10px;
60}
61.btn:hover{
62  background-color: #d84940;
63}
64.isaratop{
65  background-image:url(../img/main.jpg);
66  background-size:cover;
67  height:500px;
68  text-align: center;
69}
70.isaratop h1{
71  padding-top:80px;
72  line-height:50px;
73}
74.isaratop p{
75  font-weight: 600;
76  margin-top:30px;
77}
78.ask{
79  background-color: #ebb94c;
80  color:#ffffff;
81  height:600px;
82  /* text-align: center; */
83  margin-bottom:60px;
84}
85.ask .txtm{
86  padding-top:40px;
87}
88.ask-point{
89  background-color: #f9f2f4;
90  border-radius:3px;
91  color:#c7254e;
92  width:420px;
93  margin:0 auto;
94  margin-top:20px;
95  margin-bottom: 50px;
96  font-weight:600;
97}
98.btn2{
99  width:80%;
100  height:104px;
101  border:1px solid #d86c67;
102  background-color: #d86c67;
103  border-radius: 50px;
104  text-align: center;
105  margin: 0 auto;
106  margin-bottom:20px;
107}
108.btn2 a{
109  text-decoration: none;
110  color:#ffffff;
111  font-size:28px;
112  display: block;
113  height:100%;
114  line-height:104px;
115  font-weight: 600;
116}
117.btn2:hover{
118  background-color: #d84940;
119}
120.ask h2{
121  font-size:21px;
122  margin-top:30px;
123}
124.sns{
125  text-align: center;
126  margin-top:40px;
127  margin-bottom:40px;
128}
129
130/* /////////fleedam///////// / */
131.freedom{
132  background-image:url(../img/introbottom.jpg);
133  background-size:cover;
134  height:560px;
135  position: relative;
136}
137.txtbox{
138  width:860px;
139  max-width:calc(100%-40%);
140  margin:0 auto;
141  position:relative;
142  z-index: 9;
143}
144.txtbox::before,.txtbox::after{
145  content:'';
146  width:50px;
147  height:50px;
148  position: absolute;
149  display:inline-block;
150  box-sizing:border-box;
151}
152.txtbox::before{
153  border-top:4px solid #eab857;
154  border-left:4px solid #eab857;
155  top:0;
156  left:0;
157}
158.txtbox::after{
159  border-right:4px solid #eab857;
160  border-bottom:4px solid #eab857;
161  bottom:0;
162  right:0;
163}
164.txtbox .txtl{
165  padding:30px 0 30px 0;
166}
167.underline{
168  background:linear-gradient(transparent 70%,#eab857 50%);
169  font-weight:600;
170}
171.about-btn{
172  color:#ffffff;
173  background-color:#EBB94D;
174  height: 80px;
175  width: 80px;
176  border-radius:50%;
177  position: absolute;
178  bottom:-40px;
179  left:0;
180  right:0;
181  margin:0 auto;
182}
183.about-btn p{
184  line-height: 80px;
185}
186
187/* ///////////////about//////////////////////// */
188.about{
189  background-color:#FEF5E0;
190  padding-top:40px;
191  height:570px;
192}
193.about .txtm{
194  font-weight:600;
195  margin-bottom:20px;
196}
197.flex{
198  display: flex;
199  justify-content: center;
200}
201.about-box{
202  margin:30px;
203  padding:20px;
204  padding-bottom:0;
205  border:2px solid #eab857;
206  border-radius:3px;
207  background-color:#fff;
208  height:230px;
209}
210.picturebox{
211  text-align: center;
212  width:155px;
213  height:135px;
214}
215.picturebox p{
216  font-size:12px;
217  margin-top:10px;
218}
219
220/* //////////aboutsecond////////// */
221
222
223.aboutsecond{
224  background-image: url(../img/aboutsecondbg.jpg);
225  background-size:cover;
226  height:460px;
227}
228.aboutsecond h1{
229  color:#fff;
230  padding-top:50px;
231  font-weight: 100;
232}
233.aboutsecond h2{
234  color:#fff;
235  font-weight:100;
236  font-size:20px;
237  line-height:60px;
238}
239.about-second-txt{
240  color:#eabb57;
241}
242.container{
243  display: flex;
244  justify-content: center;
245}
246.stepbox{
247  background-color: #fff;
248  width:300px;
249  height:100px;
250  text-align: center;
251  margin:15px;
252  margin-top:25px;
253  margin-bottom:25px;
254  border-radius: 7px;
255  padding:30px
256}
257.step{
258  background-color: #eab857;
259  color:#fff;
260  height:22px;
261  margin:0 20px 20px 20px;
262  border-radius: 5px;
263  font-weight: bold;
264}
265.txts{
266  font-size:12px;
267  font-weight: bold;
268  padding:10px 0 15px 0;
269}
270.txtms{
271  font-size:14px;
272  font-weight: bold;
273}
274
275
276

CSS
1コード/* responsive */
2@media screen and (max-width:800px){
3
4.txtbox{
5  width: auto;
6}
7.container{
8  
9}
10}
11

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

回答1件

ベストアンサー

display: flex;を消す、というよりdisplay: block;などで上書きすると縦並びにはなります。

CSS
1@media screen and (max-width: 800px) {
2  /* どちらか片方は不要かもしれません。 */
3  .flex {
4    display: block;
5  }
6  .container {
7    display: block;
8  }
9}

追記:
ステップの白背景のパネルについては、以下のように指定するとよさそうです。

CSS
1@media screen and (max-width: 800px) {
2  .stepbox {
3    margin-left: auto;
4    margin-right: auto;
5    width: calc(100% - 20px - 20px); /* 「20px」は左右の余白。好きなように調整してください */
6    max-width: 400px; /* 400pxはStepパネルの横幅、好きなように設定してください */
7  }
8}