如何在引导程序 4 中订购 div？ [复制]答案

【问题标题】：How to order divs in bootstrap 4? [duplicate]如何在引导程序 4 中订购 div？ [复制]
【发布时间】：2020-01-07 01:19:58
【问题描述】：

我必须在一行 div 中相邻的 div。在移动设备上，我希望 right_side div(col-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-md-9 div 作为第一个 div。

【问题讨论】：

标签： html css bootstrap-4

【解决方案1】：

您可以使用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>

【讨论】：

【解决方案2】：

使用Column Ordering 完成此操作。

col-md-push-6 会将列“推”到右侧 6，col-md-pull-6 将在“md”或更大的视口上将列“拉”到左侧。在任何较小的视口上，列将再次按正常顺序排列。

我认为让人们失望的是，您必须在 HTML 中将 B 放在 A 之上。可能有一种不同的方法可以做到这一点，其中 A 可以在 HTML 中高于 B，但我不知道该怎么做......

See Code

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

视口 >= md

|A|B|

视口

|B|
|A|

【讨论】：

【解决方案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>

【讨论】：

【解决方案4】：

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

【讨论】：

谢谢！

【解决方案5】：

有一个选项可以使用类来反转行。这是代码，请尝试一次。

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

【讨论】：