控制响应式布局中的列顺序和位置答案

【问题标题】：Controlling columns order and location in responsive layout控制响应式布局中的列顺序和位置
【发布时间】：2020-10-27 09:19:48
【问题描述】：

我正在尝试创建一个与以下非常相似的布局（在大屏幕上），

 +----------------------------------+
 |               Header             |
 +-------------------------+--------+
 |                         |        |
 |                         |Object A|
 |                         |        |
 |                         +--------+
 |                         |        |
 |      Main Content       |        |
 |                         |Object B|
 |                         |        |
 |                         |        |
 |                         +--------+
 |                         |        |
 |                         |        |
 +-------------------------+--------+
 |               Footer             |
 +----------------------------------+

使用 Bootstrap 4。我知道 Bootstrap 的方法是移动优先的，因为我希望上面只是在移动设备上堆叠一个，所以我这样定义它，

<div class="container">
    <div class="row">
        <div class="row mx-auto">
            <h1>Header</h1>
        </div>
        <div class="row justify-content-end">
            <!-- Object A -->
            <div class="col-xs-12 order-xs-1 col-lg-5 order-lg-1 px-4 align-content-end">
            </div>                
            <!-- Main Content -->
            <div class="col-xs-12 order-xs-2 col-lg-7 order-lg-3 px-4 align-content-start flex-shrink-1">
            </div>
            <!-- Object B -->
            <div class="col-xs-12 order-xs-3 col-lg-5 order-lg-2 px-4 align-content-end">
            </div>                
        </div>
        <!-- Footer -->
        <div class="row mx-auto">
            <h6>All Rights Reserved © 2020</h6>
        </div>
    </div>
</div>

虽然在移动设备上我得到了预期的结果，但在宽屏幕上，Object A 和 Object B 位于顶部，彼此相邻，Main Content 就在它们下方。

tldr;我正在尝试在 PC 上实现上述布局，而在移动设备上我希望它按以下顺序堆叠：[Header][Object A][Main Content][Object B][Footer] 但无法使两者在相同的 HTML 代码上工作。

【问题讨论】：

可能重复 - stackoverflow.com/questions/33947885/…
如果这是一个普通的 CSS 问题，我想你可以称它为骗子，但我试图了解预定义的 Bootstrap 4 属性是否会导致我正在关注的布局。

标签： css twitter-bootstrap flexbox responsive-design

【解决方案1】：

为了获得你想要的结构，你必须在你的表格中创建一个“subrow”：（打开整个页面以供桌面显示）

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<div class="container">
  <div class="row mx-auto">
      <h1>Header</h1>
  </div>
  <div class="row justify-content-end">
      <!-- Main Content -->
      <div class="col-xs-12 order-xs-2 col-lg-7 px-4 align-content-start flex-shrink-1">
        MAIN
      </div>
      <div class="col-xs-12 order-xs-1 col-lg-5 px-4 align-content-end">
        <div class="row"> 
          <!-- Object A -->
          <div class="col-12">
            A
          </div>    
          <div class="col-12">
            B
            </div> 
          </div>             
        </div>
     </div>
    <!-- Footer -->
    <div class="row mx-auto">
        <h6>All Rights Reserved © 2020</h6>
    </div>
</div>

【讨论】：

感谢您的回答伙伴，但我希望 A 在较小的屏幕上排在 MAIN 之前
在这种情况下，我会：复制 A（如果它很小/它是一个单独的组件）或使用 JS 在小屏幕上跨 DOM 移动元素