垂直包装Bootstrap中的元素列

Question

我想知道是否有办法在Bootstrap中获得垂直包裹的一系列元素？这个问题一直是asked before，显而易见的答案是使用Bootstrap的网格 - 将每组元素粘贴在一个6宽的子列中。这正是我现在正在做的事情：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<form class="container horizontal-form">
    <div class="row">
        <div class="col-xs-6" id="left_side">
            <div class="row" id="row1">
                <div class="col-xs-4">Label 1</div>
                <div class="col-xs-8"><input name="input1"/></div>
            </div>
            <div class="row" id="row2">
                <div class="col-xs-4">Label 2</div>
                <div class="col-xs-8"><input name="input2"/></div>
            </div>
            <div class="row" id="row3">
                <div class="col-xs-4">Label 3</div>
                <div class="col-xs-8"><input name="input3"/></div>
            </div>
        </div>
        <div class="col-xs-6" id="right_side">
            <div class="row" id="row4">
                <div class="col-xs-4">Label 4</div>
                <div class="col-xs-8"><input name="input4"/></div>
            </div>
            <div class="row" id="row5">
                <div class="col-xs-4">Label 5</div>
                <div class="col-xs-8"><input name="input5"/></div>
            </div>
            <div class="row" id="row6">
                <div class="col-xs-4">Label 6</div>
                <div class="col-xs-8"><input name="input6"/></div>
            </div>
        </div>
    </div>
</form>

但现在，我想将div#row1，div#row2等转换为sortable元素。用户将能够将行拖动到所需的顺序，当它们被删除时，输入的名称将由事件处理程序更新。当有人在这些组之间拖延时，将它们分成两个独立的组可以完成很多工作。但如果我把它们放在一个组中，它们会水平包裹而不是垂直包裹：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<form class="container horizontal-form">
    <div class="row">
        <div class="col-xs-6" id="row1">
            <div class="row">
                <div class="col-xs-4">Label 1</div>
                <div class="col-xs-8"><input name="input1"/></div>
            </div>
        </div>
        <div class="col-xs-6" id="row2">
            <div class="row">
                <div class="col-xs-4">Label 2</div>
                <div class="col-xs-8"><input name="input2"/></div>
            </div>
        </div>
        <div class="col-xs-6" id="row3">
            <div class="row">
                <div class="col-xs-4">Label 3</div>
                <div class="col-xs-8"><input name="input3"/></div>
            </div>
        </div>
        <div class="col-xs-6" id="row4">
            <div class="row">
                <div class="col-xs-4">Label 4</div>
                <div class="col-xs-8"><input name="input4"/></div>
            </div>
        </div>
        <div class="col-xs-6" id="row5">
            <div class="row">
                <div class="col-xs-4">Label 5</div>
                <div class="col-xs-8"><input name="input5"/></div>
            </div>
        </div>
        <div class="col-xs-6" id="row6">
            <div class="row">
                <div class="col-xs-4">Label 6</div>
                <div class="col-xs-8"><input name="input6"/></div>
            </div>
        </div>
    </div>
</form>

那么，在Bootstrap 3中是否有一种方法可以将这些元素按垂直顺序放在页面上，同时将它们全部保留为同一父元素的直接后代？