How to seamlessly merge parent row and child row in Bootstrap?

We're currently designing an e-shop app using laravel-livewire and for frontend we use bootstrap. We've recently run into a situation with infinity scroll and loading additional products.

The way this loading works is by creating a container div with a grid layout, and inserting children (products) into it. If the user chooses to load another portion of products, he pressed a button and the same container div is loaded right after the children, meaning the containers get nested.

In code, it looks like this:

<div wire:id="XXX" class="products-grid">
    <main>PRODUCT</main>
    <main>PRODUCT</main>
    <main>PRODUCT</main>
    <main>PRODUCT</main>
    <div wire:id="YYY" class="products-grid">
        <main>PRODUCT</main>
        <main>PRODUCT</main>
        <main>PRODUCT</main>
        <main>PRODUCT</main>
        <div wire:id="ZZZ">...</div>
    </div>
</div>

And by now, additionaly loaded products don't continue in the previous row, as can be expected. On smaller screens, this can look very bad and confusing, as you can see on the image below:

We would like the products to continue in the previous generated row and not make a new one without filling up the upper one.

So, I'm looking for a possible solution to this problem, preferably on the front-end base. We have to preserve the wire:id attribute.

I'm happy to answer more questions and sorry for any confusion or mistakes.