[問題] 請問codepen範例中RWD的元素上下排列

[articulation (...)]

大家好

就是我在RWD的 max-width: 768px 中
要怎麼樣讓 left-col和 right-col 不是像桌面版本一樣並排(兩者排成一列)
而是希望讓兩者上下排列( left-col 在上，right-col在下

請參考 https://codepen.io/anon/pen/NvEEwM

我是在後面的原始碼中加了
@media only screen and (max-width: 768px){


    .left-col{
        width:100%;
    }

    .right-col{
        width:100%;
        position: relative;
        left:0%;
        top:100%;

    }
}

可是沒有運作成我想要的樣子，反而是right-col 蓋在 left-col之上
不知大家有沒有什麼建議呢?
謝謝大家~

--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 106.105.120.70
※ 文章網址: https://www.ptt.cc/bbs/Web_Design/M.1504087394.A.B60.html
→ tino1991:  .left-col 是絕對位置喔
推 nottt: 樓上正解，把css第11行的position: absolute; 刪掉就好
→ articulation: 嗯嗯~謝謝各位開示 在codepen是可以的,只是在我寫
→ articulation: 的網頁上好像還是不行,我會再研究的　謝謝各位～