html - 屏幕变小时更改 Bootstrap 中的位置顺序

Question

正如您在下面的图片中看到的，当我缩小屏幕时，第二个元素自然会低于第一个元素，但我想保持这个顺序，1,3,2。那是因为第三个元素应该在第一个元素之下。有什么办法可以做到这一点？

<%--MODULOS--%>
        <div class="col-md-6">
            <div class="row">
                <label >Módulos</label>
                <select class="col-xs-12" multiple="multiple" id="cboModulos" name="cboModulos">
                </select>
            </div>
        </div>

        <%--RANGO DE FECHAS--%>
        <div class="col-md-6">
            <div class="row rowPadding">

                <%--RANGO DE FECHAS--%>
                <div class="row">
                        <label class="paddingLabelBigDevice">Rango de Fechas</label>
                </div>

                <%--DESDE--%>
                <div class="row">
                    <label for="txtFechaIni" class="col-md-2 removePadding lineHeightCampos35" >Desde</label>
                    <input type="text" name="fechaInicio" class="col-xs-12 col-md-10" id="txtFechaIni" style="display: inline; white-space: nowrap;" data-beatpicker="true" data-beatpicker-format="['DD','MM','YYYY'],separator:'/'" data-beatpicker-extra="customOptionsDataPicker" data-beatpicker-module="today,clear" />
                </div>

                 <%--HASTA--%>
                <div class="row">
                    <label for="txtFechaFin" class="col-xs-12 col-md-2 removePadding lineHeightCampos35">Hasta</label>
                    <input type="text" class="col-xs-12 col-md-10" name="FechaFin" id="txtFechaFin" data-beatpicker="true" data-beatpicker-format="['DD','MM','YYYY'],separator:'/'" data-beatpicker-extra="customOptionsDataPicker" data-beatpicker-module="today,clear" />
                </div>

            </div>
        </div>
    </div>

    <div class="row">
        <%--TIPOS DE DOCUMENTOS--%>
        <div class="col-md-6">
            <label id="lblTipoDoc">Seleccione un tipo de documento ...</label>
            <input id="txtIdTipoDoc" hidden="hidden" />
            <div id="divContenedorTipoDoc">
                <div id="divTiposDoc">
                </div>
            </div>
        </div>

Answer 1

你不能把元素 1 和 3 当作一个元素来连接吗？这样你就可以确保元素 3 始终低于元素 1

<%--MODULOS--%>
    <div class="col-md-6">
        <div class="row">
            <label >Módulos</label>
            <select class="col-xs-12" multiple="multiple" id="cboModulos" name="cboModulos">
            </select>
        </div>
        <div class="row">
            <label id="lblTipoDoc">Seleccione un tipo de documento ...</label>
            <input id="txtIdTipoDoc" hidden="hidden" />
            <div id="divContenedorTipoDoc">
                <div id="divTiposDoc">
                </div>
            </div>
        </div>
    </div>

    <%--RANGO DE FECHAS--%>
    <div class="col-md-6">
        <div class="row rowPadding">

            <%--RANGO DE FECHAS--%>
            <div class="row">
                    <label class="paddingLabelBigDevice">Rango de Fechas</label>
            </div>

            <%--DESDE--%>
            <div class="row">
                <label for="txtFechaIni" class="col-md-2 removePadding lineHeightCampos35" >Desde</label>
                <input type="text" name="fechaInicio" class="col-xs-12 col-md-10" id="txtFechaIni" style="display: inline; white-space: nowrap;" data-beatpicker="true" data-beatpicker-format="['DD','MM','YYYY'],separator:'/'" data-beatpicker-extra="customOptionsDataPicker" data-beatpicker-module="today,clear" />
            </div>

             <%--HASTA--%>
            <div class="row">
                <label for="txtFechaFin" class="col-xs-12 col-md-2 removePadding lineHeightCampos35">Hasta</label>
                <input type="text" class="col-xs-12 col-md-10" name="FechaFin" id="txtFechaFin" data-beatpicker="true" data-beatpicker-format="['DD','MM','YYYY'],separator:'/'" data-beatpicker-extra="customOptionsDataPicker" data-beatpicker-module="today,clear" />
            </div>

        </div>
    </div>
</div>

或者类似的东西。

不过，构建 Bootstrap 响应式网格的正确方法是行内的列。你在做相反的事情，你在列中有行