html - col-*-push et col-*-pull 不工作

Question

我正在尝试以较小的分辨率更改列的顺序，但这似乎对我不起作用。当我使用推拉时，列只会改变它们的位置。

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

Answer 1

这就是它应该做的全部。如果你想在不同的分辨率下改变顺序，你可以使行成为一个 flexbox 并使用“order”属性结合媒体查询来重新排序它们。所谓灵活元素，它们是指 display: flex 或 display: inline-flex 元素内的任何内容。

https://www.w3schools.com/cssref/css3_pr_order.asp