Change position order in bootstrap when smaller screen - html

Question

As you can see in the following pictures, when i make my screen smaller, naturally the second element goes below the first element, but i want to keep this order, 1,3,2.
That is because the third element should be below the first element.
Any way to acomplish this?
<%--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

Can't you join elements 1 and 3 as if they were a single element? That way you ensure that element 3 will allways be below element 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>
Or something like that.
Still, the proper way to build a bootstrap responsive grid is columns inside rows. You are doing it inverse, you have rows inside columns

Answer 2

Take a look the the bootstrap docs - column ordering on how to do this.
One thing to keep in mind is that you will want to order elements on your page in the order they would be laid out on a mobile device rather a desktop view.

Answer 3

You could do it as pablito.aven said, just by using two col-md-6 container instead of three.
<div class="col-md-6">
<row>A</row>
<row>C</row>
</div>
<div class="col-md-6">B</div>
Otherwise if you want to keep them in seperate col-md-6 container:
<div class="col-md-6 first">A</div>
<div class="col-md-6 third">C</div>
<div class="col-md-6 second">B</div>
you may simply change the flexbox order attribute when you have a small screen.
<style>
#media only screen and (max-width : 768px) {
.first{
order: 1;
}
.second{
order: 2;
}
.third{
order: 3;
}
}
</style>