Flexbox lay-out stacked columns and rows

Flexbox lay-out stacked columns and rows
0
#1

Hi,

I’m trying hard to achieve the following lay-out in Shoelace CSS / Flexbox.

***** DESKTOP *******

[ <–BACK-- ]

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

[-- META DATA --] [ ------- IMAGE ------ ]

[-- TAG DATA --] [ ------- SUMMARY ----- ]

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

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

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

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

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

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

******* MOBILE *********

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

[ ------ IMAGE ----- ]

[ ----- SUMMARY ----- ]

[-- TAG DATA --]

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

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

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

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

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

------- CONTENT -----]
Steps to Reproduce

<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>

Anyone able to help me to get a step further?

Thanks in advance for your cooperation!

#2

Sorry. In my opinion, an answer to this question would require writing a whole new tutorial on flexbox as it requires to talk about many things. I strongly encourage you to search for flexbox tutorials (you have tons on YouTube), try and build your layout from scratch and ask a more specific question. :slight_smile:

Maybe I’m wrong and someone is able to help you in few lines.

Happy coding!