css - 如何使用引导程序以不同的顺序从 1 列到 3 个不同的列排序 div

Question

目标是在 2 或 3 个不同的列中更改屏幕大小时重新排序列的 div，并且以不同的顺序。（*在此处查看图像*）除了 div 之间没有大的空白空间边距。

<div class="container-fluid">
 <div class="row">
  <div class="col-md-5 order-md-2 offset-md-7">**A**</div>
  <div class="col-md-7 order-md-1">**B**</div>
  <div class="order-md-5">**C**</div>
  <div class="col-md-5 order-md-4 offset-md-7">**D**</div>
  <div class="col-md-5 order-md-3 offset-md-5">**E**</div>
  <div class="order-md-6">**F**</div>
 </div>
</div>

我可以把东西整理好，但是 A 和 E 之间有一个我不能加入的空间（高度）。这是正确的方法还是有其他方法？

我想如果你告诉我我可以自己弄清楚第三列的方法。

在图像中，示例；1 列中的 div 需要有不同的顺序并且在 3 列中

标签： cssbootstrap-4

Answer 1

您需要jquery交换div列的内容B和C

ordercolumn名称D和类E

当您调整到移动屏幕时不要忘记重新加载页面以查看更改，mobile devices因为我正在使用jquery实时检测mobile screen

这是jsfiddle的链接： https ://jsfiddle.net/ng9Lhfa5/

如果您查看现场 jsfiddle 演示并将屏幕大小调整为移动设备，只需按一下shift+enter，您就会知道 col 已经切换了他们的位置

$(document).ready(function() {
  // Get the inner HTML (Column B and Column C in this case)
  var x = document.getElementById("movefrom1").innerHTML
  var y = document.getElementById("movefrom2").innerHTML


  if (window.innerWidth <= 768) { // Check the browser's width
    // Move the element to where you want (moveto id)
    document.getElementById("b").innerHTML = x;
    document.getElementById("c").innerHTML = y;
    // Replace the element by an empty string.
    document.getElementById("movefrom1").innerHTML = ""
    document.getElementById("movefrom2").innerHTML = ""
  }
});

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>




<div class="container-fluid text-center text-white">
  <div class="row bg-primary">
    <div class="col-lg-4 col-md-6 p-md-5" id="movefrom1">
      Column-B
    </div>
    <div class="col-lg-4 col-md-6 order-0">
      <div class="row ">
        <div class="col-12 p-5">Column A</div>
        <div class="col-12 p-md-0 p-5" id="b"></div>
        <div class="col-12 p-md-0 p-5" id="c"></div>
        <div class="col-12 p-5 order-md-4 order-5">Column E</div>
        <div class="col-12 p-5 order-md-5 order-4">Column D</div>
      </div>
    </div>
    <div class="col-lg-4">
      <div class="row">
        <div class="col-12 bg-dark p-md-5" id="movefrom2">Column C</div>
        <div class="col-12 bg-secondary p-5">Column F</div>
      </div>
    </div>
  </div>
</div>