移动友好的CSS选项卡功能

Question

我已经成功地通过示例创建了仅CSS选项卡功能。该代码可以在PC屏幕上完美显示，但是在移动设备上，这些标签会彼此位于下方，因此无法按它们。

我的CSS知识仅限于解决问题。有一个“位置：绝对；”。 div内的“位置：相对”；容器。

如果任何人都可以帮助更改代码，那么该功能也可以在移动设备上发挥作用。

用于标签功能的CSS。

.wietabs {
    position: relative;   
    min-height: 600px; 
    clear: both;
    margin: 25px 0;
}
.wietab {
    float: left;
}
.wietab label {
    background: #eee; 
    padding: 10px; 
    border: 1px solid #ccc; 
    margin-left: -1px; 
    position: relative;
    left: 1px; 
    display: inline;
    font-size: 14pt;
}
.wietab [type=radio] {
    display: none;   
}
.wietabcontent {
    position: absolute;
    top: 28px;
    left: 0;
    background: white;
    right: 0;
    bottom: 0;
    padding: 20px;
    border: 1px solid #ccc; 
    overflow: auto;
}
[type=radio]:checked ~ label {
    background: white;
    border-bottom: 1px solid white;
    z-index: 2;
    font-weight: bold;
}
[type=radio]:checked ~ label ~ .wietabcontent {
    z-index: 1;
}

用于选项卡功能的HTML

<div class="row-fluid">
    <div style="min-height: 300px;" class="wietabs">
        <div class="wietab">
            <input type="radio" id="wietab-1" name="wietab-group-1" checked>
            <label for="wietab-1">Tab1 Content</label>
            <div class="wietabcontent">
                <p>
                    Tab1          
                </p>
            </div> 
        </div>

        <div class="wietab">
            <input type="radio" id="wietab-2" name="wietab-group-1">
            <label for="wietab-2">Tab2 Content</label>

            <div class="wietabcontent">
                <p>
                    Tab2          
                </p>
            </div> 
        </div>

        <div class="wietab">
            <input type="radio" id="wietab-3" name="wietab-group-1">
            <label for="wietab-3">Tab3 Content Lang</label>

            <div class="wietabcontent">
                <p>
                    Tab3          
                </p>
            </div> 
        </div>
    </div>
</div>

JS Fiddle working example