レスポンシブデザイン　スマートフォンの画面でカラムを縦並びにする

レスポンシブデザインで横並びのカラムを縦並びにしたい。

現在レスポンシブのページを作る練習をしています。
以下に画像添付しますが、サイトをiphoneなどの小型端末で開いたときに横並びのカラムを縦並びにして大きく見やすくしたいです。（ファイルが多くて見づらいかもしれませんが宜しくお願い致します。）

CodePen(基礎のHTML,CSSです):
https://codepen.io/U-king/pen/KLvpBB

ここのサイトからカラムを横並びにつくるCSSをDLしてHTMLで読み込んで使っています。
これは、例えばこのCSSの中に.span-1-of-3 { width: 33.9%}のように記載されていて、HTMLのclassに記載すれば３列のカラムが作れるようになっています。
http://www.responsivegridsystem.com/

こちらが、レスポンシブデザインを作るためのMedia queryのCSSファイルです。(下段にFULLのCSSファイルを記載しております。)
問題点：
.col {
width: 100% !important;
margin: 0 0 4% 0;
で、screen-sizeが767px以下の時に一つのカラムがwidth:100%で表示されるようにして、
カラムを上に縦並びにしようとしているのですが、横並びのままになります。

CSS
1/*  .col { 
2    width: 100% !important;
3    margin: 0 0 4% 0;
4で、screen-sizeが767px以下の時に一つのカラムがwidth:100%で表示されるようにして、
5カラムを上に縦並びにしようとしているのですが、横並びのままになります。
6  }*/
7@media only screen and (max-width: 767px) {
8  body { font-size: 16px;}
9  section { padding: 30px 0;}
10
11  .row,
12  .hero-text-box { padding: 0 4%;}
13
14  .col { 
15    width: 100% !important;
16    margin: 0 0 4% 0;
17  }
18  .main-nav {display: none;}
19
20  h1 { font-size: 100%}
21  h2 { font-size: 150%}
22
23  .long-copy {
24    width: 100%;
25    margin-left: 0%;
26  }
27
28  .works-step { margin-bottom: 20px; }
29  .works-step:last-of-type { margin-bottom: 20px;}
30
31    .works-step div {
32
33      height: 40px;
34      width: 40px;
35      padding: 5px;
36
37      margin-right: 15px;
38      padding: 4px;
39      font-size: 120%;
40  }
41
42    .steps-box:first-child {
43    text-align: right;
44    padding-right: 3%;
45    margin-top: 30px;
46  }
47}

CSS
1
2
3
4
5/*  big tablets to 1200px (widths smaller than the 1140px row) */
6@media only screen and (max-width: 1200px) {
7  .hero-text-box {
8      width: 100%;
9      padding: 0 2%;
10    }
11
12    .row { padding: 0 2%; }
13
14    }
15
16
17/* 横向きのipad screen = 1024px
18small tablets to big tablets: frmo 768px to 1023px  */
19@media only screen and (max-width: 1023px) {
20  body { font-size: 18px; }
21  section { padding: 60px 0;}
22
23  .long-copy {
24    width: 80%;
25    margin-left: 10%;
26  }
27
28  .steps-box { margin-top: 10px; }
29  .works-steps { margin-bottom: 40px; }
30  .works-step:last-of-type { margin-bottom: 80px;}
31
32  .app-screen {width: 50%;}
33
34  .ion-icon { 
35    width: 17px;
36    margin-right: 5px;
37  }
38  .city-feature {font-size: 90%;}
39
40  .plan-box {
41    width: 100%;
42    margin-left: 0%;
43  }
44
45  .plan-price { font-size: 250%; }
46
47  .contact-form { width: 90%;}
48
49}
50
51/* small phones to small tablets (ipad screen = 780px): from 481px to 767px  */
52@media only screen and (max-width: 767px) {
53  body { font-size: 16px;}
54  section { padding: 30px 0;}
55
56  .row,
57  .hero-text-box { padding: 0 4%;}
58
59  .col { 
60    width: 100% !important;
61    margin: 0 0 4% 0;
62  }
63  .main-nav {display: none;}
64
65  h1 { font-size: 100%}
66  h2 { font-size: 150%}
67
68  .long-copy {
69    width: 100%;
70    margin-left: 0%;
71  }
72
73  .works-step { margin-bottom: 20px; }
74  .works-step:last-of-type { margin-bottom: 20px;}
75
76    .works-step div {
77
78      height: 40px;
79      width: 40px;
80      padding: 5px;
81
82      margin-right: 15px;
83      padding: 4px;
84      font-size: 120%;
85  }
86
87    .steps-box:first-child {
88    text-align: right;
89    padding-right: 3%;
90    margin-top: 30px;
91  }
92}
93
94
95
96/* small phones: from 0 to 480px  */
97@media only screen and (max-width: 480px) {
98
99}
100