我正在尝试以小分辨率更改列的顺序，但这似乎对我不起作用。当我使用推拉时，列只会改变它们的位置。
.container, html, body{
width: 100% !important;
height: 100% !important;
padding:0;
position: relative;
}
#container{
background-image: url("img/back-map.jpg");
}
.margin-zero{
margin :0px;
}
/* .border-solid-black{
border: black solid 1px;
}*/
.checkbox label:after,
.radio label:after {
content: '';
display: table;
clear: both;
}
.checkbox .cr,
.radio .cr {
position: relative;
display: inline-block;
border: 1px solid #a9a9a9;
border-radius: .25em;
width: 1.3em;
height: 1.3em;
float: left;
margin-right: .5em;
}
.radio .cr {
border-radius: 50%;
}
.checkbox .cr .cr-icon,
.radio .cr .cr-icon {
position: absolute;
font-size: .8em;
line-height: 0;
top: 50%;
left: 20%;
}
.radio .cr .cr-icon {
margin-left: 0.04em;
}
.checkbox label input[type="checkbox"],
.radio label input[type="radio"] {
display: none;
}
.checkbox label input[type="checkbox"] + .cr > .cr-icon,
.radio label input[type="radio"] + .cr > .cr-icon {
transform: scale(3) rotateZ(-20deg);
opacity: 0;
transition: all .3s ease-in;
}
.checkbox label input[type="checkbox"]:checked + .cr > .cr-icon,
.radio label input[type="radio"]:checked + .cr > .cr-icon {
transform: scale(1) rotateZ(0deg);
opacity: 1;
}
.checkbox label input[type="checkbox"]:disabled + .cr,
.radio label input[type="radio"]:disabled + .cr {
opacity: .5;
}
.container input{
height : 35px;
}
.container select{
height : 35px;
}
.container textarea{
height : 65px;
}
.soft-padding{
padding-left : 70px;
padding-right: 70px;
padding-top: 200px;
padding-bottom: 200px;
}
#footer-row-auth{
position: fixed;
bottom:0;
width:100%;
height : 3%;
padding: 0;
text-align: center;
font-size: 0.9em;
color: white;
z-index: 999;
}
.vertical-align {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center
}
.padding-auth-select{
padding: 6.5px;
}
.btn-form-cnx{
width: 100%;
height : 30px;
border-radius: 0px;
}
.btn-form-insc{
background-color: rgb(79, 162, 26);
width: 100%;
height : 40px;
border-radius: 0px;
border-radius: 0px 0px 10px 10px;
-moz-border-radius: 0px 0px 10px 10px;
-webkit-border-radius: 0px 0px 10px 10px;
border: 0px solid #000000;
}
.form-control{
border-radius: 0px;
background-color: rgb(222,222,222);
}
.roboto-light{
font-family: 'Roboto Light';
}
div.media img{
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
background: white;
-webkit-box-shadow: 5px 8px 31px -6px rgba(0,0,0,0.58);
-moz-box-shadow: 5px 8px 31px -6px rgba(0,0,0,0.58);
box-shadow: 5px 8px 31px -6px rgba(0,0,0,0.58);
}
.media *{
color: white;
}
#form-auth .container{
background: white;
border-radius: 20px;
}
#form-auth h3{
margin-top: 10px;
}
#btn-text{
color:white;
}
.text-crts{
text-align: justify;
float: left;
font-size: 0.8em;
color: white;
}
.text-crts-h3{
text-align: justify;
float: left;
color: white;
}
.img-prop{
border-radius: 200px 200px 200px 200px;
-moz-border-radius: 200px 200px 200px 200px;
-webkit-border-radius: 200px 200px 200px 200px;
border: 0px solid #000000;
width: 70px;
padding: 8px;
float: right;
}
#info{
}
#info .col-xs-3{
padding-right: 20px;
}
#info h3{
padding-bottom: 5px;
}
#info .col-xs-9{
padding-bottom: 30px;
}
.input-group-addon{
background-color: rgb(215, 215, 215);
}
.hide-overflow{
overflow:hidden;
}
.horizontal-align{
display: flex;
justify-content: center;
}
@media (max-width : 992px) {
.col-xs-4 #form-auth {
float: right;
left: 0px;
}
}
.width-100percent{
width: 100%;
} <body>
<div id="container" class="container margin-zero vertical-align hide-overflow reorder horizontal-align">
<div class="row margin-zero vertical-align">
<div class="col-xs-4 col-xs-push-4 col-md-4 col-lg-4 margin-zero horizontal-align" style="height:100%;">
<div id="form-auth" class="margin-zero row " style="height:100%;">
<div class="container" style="max-width: 300px; min-width:200px;" >
<div class="row margin-zero">
<div class="row margin-zero text-center padding-auth-select">
<h3 class="roboto-light">Connexion</h3>
</div>
<div class="row margin-zero padding-auth-select">
<div class="col-xs-10 col-xs-push-1 margin-zero">
<label class="sr-only" for="inlineFormInputGroup">email</label>
<div class="input-group mb-2 mr-sm-2 mb-sm-0">
<div class="input-group-addon"><img src="img/man-user.png" width="15px;" alt=""></div>
<input type="text" class="form-control" id="inlineFormInputGroup" placeholder="email">
</div>
</div>
</div>
<div class="row margin-zero padding-auth-select">
<div class="col-xs-10 col-xs-push-1 margin-zero">
<label class="sr-only" for="inlineFormInputGroup">Mot de passe</label>
<div class="input-group mb-2 mr-sm-2 mb-sm-0">
<div class="input-group-addon"><img src="img/lock.png"width="15px;" alt=""></div>
<input type="text" class="form-control" id="inlineFormInputGroup" placeholder="Mot de passe">
</div>
</div>
</div>
<div class="row margin-zero padding-auth-select">
<div class="col-xs-8 col-xs-push-2 margin-zero horizontal-align vertical-align">
<button type="button" class=" btn-form-cnx btn btn-primary roboto-light margin-zero" style="width:auto;"><p class="margin-zero vertical-align">Se connecter</p></button>
</div>
</div>
<div class="row margin-zero text-center">
<a href="#"><p class="roboto-light" style="font-size:0.85em;">Mot de passe oublié? cliquez ici</p></a>
</div>
</div>
</div>
<div class="row margin-zero padding-auth-select">
<div class="col-xs-8 col-xs-push-2 margin-zero horizontal-align">
<button type="button" class=" btn-form-insc btn roboto-light btn-block btn-md margin-zero vertical-align" style="width:auto;"><p id="btn-text">CREER UN COMPTE</p></button>
</div>
</div>
</div>
</div>
<div id="info" class="col-xs-8 col-xs-pull-2 col-md-8 col-lg-8 margin-zero horizontal-align" style="height:100%;">
<div class="container">
<div class="row margin-zero">
<div class="col-xs-6 col-lg-12 col-md-12">
<div class=" media">
<div class="media-left">
<img src="img/drop.png" class="media-object well-sm" style="width:60px">
</div>
<div class="media-body hidden-xs hidden-sm">
<h4 class="media-heading ">IRRISAT</h4>
<p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
<div class="col-xs-6 col-lg-12 col-md-12">
<div class=" media ">
<div class="media-left">
<img id="img-crts" src="img/crts.png" class="media-object well-sm" style="width:60px">
</div>
<div class="media-body hidden-xs hidden-sm">
<h4 class="media-heading ">Rôle du CRTS</h4>
<p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="footer-row-auth" class="row margin-zero hidden-xs text-center vertical-align">
<div class="col-xs-12">
2017 - Tous droits réservés
</div>
</div>
</div>
</body>
</html>
答案 0 :(得分：0)
这应该是他们应该做的。如果要更改不同分辨率的顺序，可以将行设置为弹性框并使用＆＃34;顺序＆＃34;属性与媒体查询相结合，以便重新排序。通过灵活的项目，它们表示显示内部的任何内容：flex或display：inline-flex元素。