更改boostrap中的布局布置，从父行更改col

Question

我正在构建一个HTML页面，该页面代表应用程序中给定文档的“文档信息页面”。这是基于boostrap-4的。

我需要代表这四个信息块：

Data = Document name, size, author, etc.
Image = A thumbnail of the first page of the document.
Tags = Keywords referring to the document.
Links = Several helper links like 'see other documents of the same author' or so.

在“宽屏模式”下（例如LG和XL），布局是这样的：

• 主要内容是数据
• 图像在数据左侧
• 数据右侧的标签
• 最后，链接位于数据下方，但位于图像和标签的总高度之内

赞：

+----------------+----------------+----------------+
|                |                |                |
|                |                |                |
|                |     Data       |                |
|                |                |                |
|     Image      +----------------+      Tags      |
|                |                |                |
|                |     Links      |                |
|                |                |                |
|                |                |                |
+----------------+----------------+----------------+

我可以这样实现：

+----------------+----------------+----------------+
|                | +------------+ |                |
|                | |            | |                |
|                | |   Data     | |                |
|                | |            | |                |
|     Image      | +------------+ |      Tags      |
|                | |            | |                |
|                | |   Links    | |                |
|                | |            | |                |
|                | +------------+ |                |
+----------------+----------------+----------------+

即：与该结构相似的结构：

<div class="row">
    <div class="col">Image</div>
    <div class="col">
        <div class="row">
            <div class="col">Data</div>
        </div>
        <div class="row">
            <div class="col">Links</div>
        </div>
    </div>
    <div class="col">Tags</div>
</div>

在窄模式（MD，SM和XS）中，布局为：

• 用于图像和数据的一行。
• 下面是标签。
• 最后是链接。

赞：

+----------------+----------------+
|                |                |
|     Image      |     Data       |
|                |                |
+----------------+----------------+
|                                 |
|              Tags               |
|                                 |
+---------------------------------+
|                                 |
|              Links              |
|                                 |
+---------------------------------+

这清楚地显示了3行，可以像这样实现：

<div class="row">
    <div class="col">Image</div>
    <div class="col">Data</div>
</div>
<div class="row">
    <div class="col">Tags</div>
</div>
<div class="row">
    <div class="col">Links</div>
</div>

我已经知道的

我已经知道如果我在页面内复制了一些html，我可以发挥可见性以将某些内容隐藏在此处并使之显示。但是让内容重复是很丑的。

我已经知道，如果需要的话，我可以使用javascript从此处分离并重新附加html ...但是我很难让内容由javascript复制，移动和操作。

我确信只要重新排列顺序并使用响应断点强制宽度，就可以解决此问题。例如，最后一个布局（狭窄的布局）可以作为单个行完成，其中Image和Data为col-6，Tags和Links为{{ 1}}，并在一行中将它们全部放在四个块中，以管理col-12包装到下一行...

但是我实际上找不到在单个HTML中适合这两种布局的解决方案。

问题

如何以两种布局都使用相同的HTML的方式来构造行和列，并且只在这里使用row-*，col- *或任何本机网格内容？ https://getbootstrap.com/docs/4.3/layout/grid/