如何在bootstrap中进行响应式设计2.3.2

Question

我必须使用bootstrap v 2.3而不是v3.But有一个allignment问题。小提琴的链接 - https://jsfiddle.net/Ljfr1wgc/2/

在这里，我想将4个文本框（每个不同大小）排成一行。我尝试使用不同的span值，但对于我的桌面它可以工作，但对于移动和大型设备它不工作（我想要所有文本框移动设备中等大小的垂直排列）。我哪里出错？

<div class="container main-container">
<div class="row">
    <div class="span8">
        <form role="form">
            <div id="placeholder1">
                <div id="template">
                    <div class="fieldsetBorder">
                        <div class="row">
                            <div class="span1">
                                <label class="label-Style ">Mini </label>
                                <input type="text" class="label-class " value="Mini size needed">
                            </div>
                            <div class="span1">
                                <label class="label-Style">Small</label>
                                <input type="text" class="label-text " placeholder="Small size needed">
                            </div>
                            <div class="span1">
                                <label class="label-Style">Large</label>
                                <input type="text" class="label-text" placeholder="Large size needed">
                            </div>
                            <div class="span1">
                                <label class="label-Style">Medium</label>
                                <input type="text" class="label-text " placeholder="Medium size needed">
                            </div>                                  
                        </div>
                        <div class="row">
                            <div class="span2">
                                <label class="label-Style">Medium</label>
                                <input type="text" class="label-text input-mini" placeholder="Medium size needed">
                            </div>
                            <div class="span2">
                                <label class="label-Style">Medium</label>
                                <input type="text" class="label-text input-mini" placeholder="Medium size needed">
                            </div>
                            <div class="span2">
                                <label class="label-Style">Medium</label>
                                <input type="text" class="label-text input-mini" placeholder="Medium size needed">
                            </div>
                            <div class="span2">
                                <label class="label-Style">Medium</label>
                                <input type="text" class="label-text input-mini" placeholder="Medium size needed">
                            </div>                          
                        </div>
                        <div class="row">
                            <div class="span8">
                                <label class="label-Style" >Description</label>
                                <textarea rows="3" placeholder="Enter Description"></textarea>
                            </div>
                        </div>
                        <i class="fa fa-plus-square" onclick="Add()"></i><span>Add attachment</span>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>