将不连续的内容块扩展到 XL 屏幕上的侧边栏，而无需复制源代码块

Question

将不连续的内容块扩展到 XL 屏幕上的侧边栏，而无需复制源代码块

Jar*_*rad 6 html css flexbox bootstrap-4

我只是不确定如何做我想要实现的目标。

前置上下文

sheriffderek 在下面的回答似乎是用 css grid 解决这个问题的一个很好的尝试。这种方法的一个缺点是，当内容被添加到 XL 屏幕上的配置文件块时，它会影响该行中的其他单元格，从而导致大的空白。是的，您可以向grid-template-areas布局添加更多行，但我的内容将是可变高度，因此此解决方案似乎可能会导致意外的空白，具体取决于内容。
鉴于我不复制代码块的限制，我开始认为这不能用纯 Bootstrap 4 和 CSS 解决。
我有多年的 CSS/HTML。无论如何，我都不是初学者。我不想讨论我的学习旅程“应该”是什么。我使用 Bootstrap 4 有几个对我很重要的原因。我会要求回答者关注这个问题的具体要求。

相关背景

我正在使用 Bootstrap 4。我更喜欢纯 Bootstrap 4 解决方案（如果可能）。来自 Bootstrap 4 的 Flex 类 OK。在这一点上，我会直接使用 CSS 和 flexbox，如果它能满足我的要求。
我有一个固定的左侧边栏。我会在小屏幕上隐藏它。左侧边栏不是这个问题的重点；当屏幕宽度在 768 和更大之间时，焦点位于中列和右列。
在768（MD分钟）之间的屏幕尺寸- 1199（LG最大值），内容块（“卡低位侧”）坐镇之间一个搜索栏，内容块（顶部）和一个主内容区域（如下图）。当屏幕尺寸缩放到 1200px (xl) 或更大时，我希望“Cards Lower Sidebar”块弹出到右侧边栏。
在 768 (md min) - 1199 (lg max) 之间的屏幕宽度上，配置文件内容块位于“主要内容区域”下方。当屏幕缩放到 1200 像素 (xl) 或更大时，我希望此内容块弹出到 “卡片下侧边栏”上方的右侧边栏。
我的要求是，我不能重复 HTML 源代码块两次。例如：在源中复制配置文件块两次，并根据媒体查询的屏幕大小显示一个或另一个不显示。

图1

在下图中，“卡片下部侧边栏”位于搜索框区域和“主要内容区域”之间。当屏幕转换为 xl (1200px) 时，“卡片下侧边栏”内容块会弹出，成为右下侧边栏区域。搜索框和主要内容区域保持原样。

个人资料区域弹出成为右上角的侧边栏区域。

我什至不知道这是否可能。

之前（lg 屏幕）

之后（xl 屏幕）

我不想用我尝试过的许多错误的事情来混淆这个问题。我已经尝试了很多。

这是最小的示例代码：

html {
    height: 100%;
}
body {
    min-height: 100%;
    padding-top: 56px;
}

.sidebar {
    display: none;
}

@media (min-width: 768px) {
    .main {
        padding-left: 370px;
    }

    .sidebar {
        position: fixed;
        width: 350px;
        top: 56px;
        bottom: 0;
        left: 0;
        z-index: 1000;
        display: block;
        padding: 20px;
        overflow-x: hidden;
        overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
        background-color: #f5f5f5;
        border-right: 1px solid #eee;
    }
}

#profile-img {
    width: 150px;
    height: 150px;
    background-color: #c9c9c9;
}

归档时间：	5 年，8 月前
查看次数：	329 次
最近记录：	5 年，7 月前

将不连续的内容块扩展到 XL 屏幕上的侧边栏，而无需复制源代码块

Bootstrap 的问题

弹性盒 + 网格

正常显示内容

巨幕