Question

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

enter image description here

<%--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

看看bootstrap docs - column ordering如何做到这一点。

要记住的一件事是，您需要按照在移动设备而非桌面视图上布置的顺序在页面上订购元素。

Answer 2

你不能将元素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>

或类似的东西。

但是，构建引导响应网格的正确方法是行内的列。你正在反过来，你在列中有行

Answer 3

您可以按照pablito.aven所说的那样做，只需使用两个col-md-6容器而不是三个即可。

<div class="col-md-6">
  <row>A</row> 
  <row>C</row>
</div>  
<div class="col-md-6">B</div>

否则，如果要将它们保存在单独的col-md-6容器中：

 <div class="col-md-6 first">A</div>  
 <div class="col-md-6 third">C</div> 
 <div class="col-md-6 second">B</div>

当屏幕较小时，您可以简单地更改flexbox order属性。

<style>
@media only screen and (max-width : 768px) {
  .first{
     order: 1;
  }
  .second{
     order: 2;
  }
.third{
     order: 3;
  }
}
</style>

当屏幕较小时，更改引导程序中的位置顺序

3 个答案: