时间戳

首页 > 解决方案 > 使用 Bootstrap 更改平板设备上的布局顺序

html - 使用 Bootstrap 更改平板设备上的布局顺序

问题描述

我正在尝试获取 C div 上方的 E & F div 以获取正在处理的页面的平板电脑视图，但似乎找不到任何可以提供帮助的解决方案。任何建议将不胜感激。

HTML：

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<div class="container-fluid">
  <div class="row flex-container">
    <div style="border: 1px solid white;" class="col-lg-3 col-md-5">A</div>
    
    <div style="border: 1px solid white;" class="col-lg-6 col-md-7">B</div>
    
    <div style="border: 1px solid white;" class="col-lg-3 col-md-12">C</div>
    
    <div class="col-lg-3 col-md-5" style="border: 1px solid white;">D</div>
    
    <div class="col-lg-6 col-md-7" style="border: 1px solid white;">E</div>
    
    <div class="col-lg-3 col-md-12" style="border: 1px solid white;">F</div>
    
  </div>
  
  
<!--   <div class="row">
    <div style="border: 1px solid white;" class="col-6 col-sm-4">D</div>
    <div style="border: 1px solid white;" class="col-6 col-sm-4">E</div>
    <div style="border: 1px solid white;" class="col-6 col-sm-4">F</div>
  </div> -->
</div>

CSS：

.container {
    background-color: white;
    text-align: center;
    padding: 10px;
}

.row > div {
  padding: 10px;
}
 div {
  background-color: #2196F3;
}

代码笔： https ://codepen.io/OluwaseunII/pen/rNemVyj

标签： htmlcssbootstrap-4

解决方案

您可以使用order-nBootstrap 类来设置使用 flex 时的列的顺序，从order-0. 与大多数 Bootstrap 网格类一样，您还可以指定断点，例如order-sm-0

您可以分别给 col A 和 col B 的类order-0和order-1。然后对于其余部分，您需要指定 2 个类 - 一个用于md断点，一个用于较小的屏幕。

因此，例如 col C 是order-2 order-md-4屏幕上的位置 3，最高为 768px，位置 5 为 768px 或更高。

请参阅下面的代码，其中我在 md 断点处按照 ABEFCD 的顺序重新排列了 cols：

.container {
    background-color: white;
    text-align: center;
    padding: 10px;
}

.row > div {
  padding: 10px;
}
 div {
  background-color: #2196F3;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<div class="container-fluid">
  <div class="row flex-container">
    <div class="col-lg-3 col-md-5 order-0" style="border: 1px solid white;">A</div>
    
    <div class="col-lg-6 col-md-7 order-1" style="border: 1px solid white;">B</div>
    
    <div class="col-lg-3 col-md-12 order-4 order-md-2" style="border: 1px solid white;">C</div>
    
    <div class="col-lg-3 col-md-5 order-5 order-md-3" style="border: 1px solid white;">D</div>
    
    <div class="col-lg-6 col-md-7 order-2 order-md-4" style="border: 1px solid white;">E</div>
    
    <div class="col-lg-3 col-md-12 order-3 order-md-5" style="border: 1px solid white;">F</div>
    
  </div>

</div>

推荐阅读