响应Jquery / JS / CSS将2个div折叠成选项卡

Question

我有两个div盒子并排。在移动设备上它们不能正常工作，所以我想让它们通过实际折叠成一个在另一个上面的盒子来响应它们，并在两个盒子之间切换一个可点击的标签。

两个方框的基本代码：

CSS：

.form {
    color: white;
    max-width: 510px;
    height: 384px;
    text-align: center; 
}

.form-left {
    background-color: red;  
    margin-right: 5%;
}

.form-right {
    background-color: blue;
    margin-left: 5%;
}

HTML：

<div class="row">
    <div class="small-6 columns">
        <div class="form form-left">
            <h2 class="form-title">ONE</h2>
            <p class="artist">Some paragraph text.</p>
        </div>
    </div>
    <div class="small-6 columns">
        <div class="form form-right">
            <h2 class="form-title">TWO</h2>
            <p class="shopper">Some more paragraph text.</p>
        </div>
    </div>
</div>

非常简单的演示 HERE 。

当您调整结果窗格的大小时，它应该转换为选项卡式视图。

我认为可以用jquery完成，但我不知道从哪里开始？