如何在bootstrap 4中排序div？

Question

我必须在一行div中一个接一个地进行div。在移动端，我希望col( right_side -md-9)成为第一个div。

我试着用flex订购它，但它弄乱了我所有的网站。

<div class="row">
   <div class="col-md-3">Left side</div>
   <div class="col-md-9">Right side, but first on mobile or tablet</div>
   <div class="clearfix"></div>
</div>

如果我在移动设备或平板电脑上查看站点，我希望col 9div作为第一个div。

Answer 1

​

@media screen and (max-width: 767px) {
  .col-md-3 {
    order: 2;
  }
  .col-md-9 {
    order: 1;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

<div class="row">
  <div class="col-md-3">Left side</div>
  <div class="col-md-9">Right side, but first on mobile or tablet</div>
  <div class="clearfix"></div>
</div>

​

Answer 2

您可以使用flex和order，如下例所示。

如果它弄乱了所有的站点，那么给你的自定义类，然后给CSS。

​

@media screen and (max-width: 531px) {
    .row { display: flex; flex-direction: column; }
    .two { order: 1; }
    .one { order: 2 }
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">
<div class="row">
   <div class="col-md-3 one">Left side</div>
   <div class="col-md-9 two">Right side, but first on mobile or tablet</div>
   <div class="clearfix"></div>
</div>

​

Answer 3

只需使用order属性。

@media only screen and (max-width: 760px) {
  .col-md-3 {
 order:2;
  }
}

​

@media only screen and (max-width: 760px) {
  .col-md-3 {
 order:2;
  }
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="row">
   <div class="col-md-3">Left side</div>
   <div class="col-md-9">Right side, but first on mobile or tablet</div>
   <div class="clearfix"></div>
</div>

​