如何管理所有屏幕尺寸的引导网格？

Question

我在行div中放了四列如下屏幕： 当我最小化在一列中对齐的屏幕尺寸时。但随着屏幕尺寸的减小，我希望逐步对齐：

• 最初他们必须在一行中，即[1X4网格]。
• 当屏幕尺寸最小化时，它们必须分解为2X2网格。
• 如果我们进一步减小屏幕尺寸，那么只能在一列[4X1网格]中对齐。

我的HTML：

<div class="container-fluid">
    <div class="row">
        <!--  colomn # 01 -->
        <div class="col-md-4 col-sm-4">
            <div class="row">
                <div class="col-md-12 col-sm-12">Select Prop Type</div>
                <div class="col-md-12 col-sm-12">
                    <input type="text" class="form-control" />
                </div>
                <div class="col-md-12 col-sm-12">Select Report</div>
                <div class="col-md-12 col-sm-12">
                    <input type="text" class="form-control" />
                </div>
                <div class="col-md-12 col-sm-12">Available Fields</div>
                <div class="col-md-12 col-sm-12">
                    <div class="div_availablefield">
                        Available fields go here..!
                    </div>
                </div>
            </div>
        </div><!-- End of column # 01 -->

        <!--  colomn # 02 -->
        <div class="col-md-2 col-sm-2">
            <div class="row">
                <div class="col-md-12 col-sm-12">
                    <input type="button" class="btn btn-primary btn-responsive" value="New Report" />
                </div>
                <div class="col-md-12 col-sm-12">
                    <label>Account</label>
                </div>
                <div class="col-md-12 col-sm-12">
                    <input type="button" class="btn btn-primary btn-responsive" value="Move Right >>>" />
                </div>
                <div class="col-md-12 col-sm-12">
                    <input type="button" class="btn btn-primary btn-responsive" value="Move Left <<<" />
                </div>
                <div class="col-md-12 col-sm-12">
                    <input type="button" class="btn btn-primary btn-responsive" value="Move Up" />
                </div>
                <div class="col-md-12 col-sm-12">
                    <input type="button" class="btn btn-primary btn-responsive" value="Move Down" />
                </div>
                <div class="col-md-12 col-sm-12">
                    <input type="button" class="btn btn-primary btn-responsive" value="Save Data" />
                </div>
                <div class="col-md-12 col-sm-12">
                    <input type="button" class="btn btn-primary btn-responsive" value="Close" />
                </div>
            </div>
        </div><!-- End of column # 02 -->

        <!--  colomn # 03 -->
        <div class="col-md-3 col-sm-3">
            <div class="row">
                <div class="col-md-12 col-sm-12">Assigned Fields</div>
                <div class="col-md-12 col-sm-12">
                    <div class="div_assignedfields">
                        Assigned Fields goes here..!
                    </div>
                </div>
                <div></div>
            </div>
        </div><!-- End of column # 03 -->

        <!--  colomn # 04 -->
        <div class="com-md-3 col-sm-3">
            <div class="row">
                <div class="col-md-12 col-sm-12">Report Position</div>
                <div class="col-md-12 col-sm-12">
                    <input type="text" class="form-control" />
                </div>
                <div class="col-md-12 col-sm-12">Custom Caption</div>
                <div class="col-md-12 col-sm-12">
                    <input type="text" class="form-control" />
                </div>
                <div class="col-md-12 col-sm-12">Custom Mask</div>
                <div class="col-md-12 col-sm-12">
                    <input type="text" class="form-control" />
                </div>
                <div class="col-md-12 col-sm-12">
                    <div class="checkbox">
                        <label>
                            <input type="checkbox" id="chbox_agent"/> Agent Only?
                        </label>
                    </div>
                </div>
                <div class="col-md-12 col-sm-12">
                    <div class="checkbox">
                        <label>
                            <input type="checkbox" id="chbox_promatch"/> Promatch Only?
                        </label>
                    </div>
                </div>
                <div class="col-md-12 col-sm-12">
                    <div class="checkbox">
                        <label>
                            <input type="checkbox" id="chbox_Caption"/>Blank Caption?
                        </label>
                    </div>
                </div>
            </div>
        </div><!-- End of column # 04 -->

    </div>
</div>

这是DEMO

Answer 1

应用这些列类

col-xs 12 col-sm-9 col-md-4     
col-xs-12 col-sm-3 col-md-2     
col-xs-12 col-sm-9 col-md-4     
col-xs-12 col-sm-3 col-md-2