Combining 2 CMS collections and displaying items from both in a pre-defined display pattern

I have got the following task to fulfil and would need some help:
I have 2 collection lists for a fashion online store: 1 - Products, 2 - Promotions.

1 - Products contain all the fashion items I will sell in my store
2 - Promotions contain some special offers, presented by a certain picture of that particular outfit, for instance.

On my store front end, where I will present all the products available (eventually for a particular category), I need the following layout:

  • 3 columns in general, and as many rows I will need to show all the products I have got in my store
  • Now, I want to somehow combine the 2 collections on that front page, to show the following for instance:
    1st row - 3 products (out of Product collection)
    2nd row - 1 promotion, but spanned over the first 2 columns of that row (out of Promotions collection), and then 1 product again (out of Product collection)
    3rd row - again 3 products (out of Product collection)
    4th row - like 2nd row

So in the end I will have something like: individual pre-defined number of items displayed from Product Collection in one columns each (for instance 4), followed by 1 item displayed from Promotion collection spanned over next 2 columns. And that pattern will repeat till the end.

and so on and so forth…

I desperately need any hint or advise on how that can be achieved in general, how do I combine them for display on the front page in that way or similar?

Thanks so much for taking the time to reply!


Here is my public share link: LINK
(how to access public share link)