围绕多行元素的响应式内容答案

【问题标题】：Responsive content around a multi-row element围绕多行元素的响应式内容
【发布时间】：2020-10-12 12:00:56
【问题描述】：

我正在开发一个网页，其中一侧有日历，另一侧有一系列 div，用于收集各种信息。在桌面视图中，我希望它们像这样，例如，CAL 基本上跨越 3 行。

CAL DIV1
CAL DIV2
CAL DIV3

我目前正在使用第 2 列中的另一个嵌套引导网格进行此操作，我不相信它可以满足我的需求，即当我响应移动设备时，我想这样做：

DIV1
DIV2
CAL
CAL
CAL
DIV3

我想不出一种结构，可以让我在移动设备上将 DIV1 和 DIV2 移动到 CAL 上方。

理想情况下，任何解决方案都是引导解决方案，但即使不是，我也非常感谢任何可以给出的指示。

【问题讨论】：

标签： css layout bootstrap-4 sass responsive-design

【解决方案1】：

尽管我在发布问题之前已经进行了搜索，但我显然做得不够彻底，或者使用了正确的术语。这个问题：One tall div next to two shorter divs on Desktop and stacked on Mobile with Bootstrap 4 给了我我的解决方案，我在下面针对我的特定示例稍作更改

<div class="container-fluid">
  <div class="row d-flex d-lg-block">
     <div class="col-lg-6 order-2 float-left">
        CAL<br/>
        CAL<br/>
        CAL<br/>
    </div>
    <div class="col-lg-6 order-0 float-right">
        A
    </div>
    <div class="col-lg-6 order-1 float-right">
        B
    </div>
  <div class="col-lg-6 order-3 float-right">
        C
  </div>
</div>

【讨论】：