Flexbox布局堆叠的列和行

Question

布置问题

不是错误或问题，但需要一些帮助。

我一直在努力获得以下布局：

  

    

*****桌面*******

         

[<-返回-]

         

[----------------- HEADER -----------------]

         

[-元数据-] [-------图像------]

         

[-标记数据-] [-------摘要-----]

               [ ------- CONTENT ------

                 ------- CONTENT ------

                 ------- CONTENT ------

                 ------- CONTENT ------

                 ------- CONTENT ------

                 ------- CONTENT ------]

         

*******移动***********

         

[-------标头------]

         

[------图像-----]

         

[-----概述-----]

         

[-标记数据-]

         

[------内容-----

         

-------内容-----

         

-------内容-----

         

-------内容-----

         

-------内容-----

         

-------内容-----]

  

复制步骤

<article>
<div class="container-fluid">
 <div class="row">
  <div class="col-md-2">
   back button
  </div>
  <div class=col-10>
   <header><h1 class=text-center>{$page_title}</h1></header>
  </div>
 </div>
 <div class="row">
  <div class="col-md-3">
   <div class="col-auto text-small">
    Date: <em>{$entry->postdate|cms_date_format}</em>
   </div>
   <div class="col-auto text-small">
    <div class="row">
     <div class="col-auto">
      Category: 
     </div>
     <span class="text-secondary">
      {$tags|substr:0:-2} 
     </span>
    </div>
   </div>
   <div class="col-auto text-small">
    Author: <em>{$entry->author}</em>
   </div>
   <div class="col-auto text-small">
    {svg use="bubbles"}
   </div>
  </div>
  <div class="col-md-9">
   Image
  </div>
  <div class="col-md-9">
   Content
  </div>
 </div>
 <div class="row">
  <div class="col-md-3">
   Category
  </div>
 </div>
</div>
</article>

其他信息

• 鞋带版本：最新版本
• 受影响的浏览器：Safari

感谢您的帮助！