Rearrange divs – Place each div under each image (javascript – jQuery)

I have the following structure example:

<div class="main">
    <div class="image">Image1</div>
    <div class="image">Image2</div>
    <div class="image">Image3</div>
</div>
<div class="side">
    <div class="Banner">Banner1</div>
    <div class="Banner">Banner2</div>
    <div class="Banner">Banner3</div>
    <div class="Banner">Banner4</div>
</div>

I want to make a script that will take each banner and placed under each image.

    <div class="main">
        <div class="image">Image1</div>
        <div class="Banner">Banner1</div>
        <div class="image">Image2</div>
        <div class="Banner">Banner2</div>
        <div class="image">Image3</div>
        <div class="Banner">Banner3</div>
        <div class="Banner">Banner4</div>
    </div>
 <div class="side"></div>

Basically there are some images placed one after another and then some banners placed one after another.

Image1
Image2
Image3
Banner1
Banner2
Banner3
Banner4

I need to take each banner and place it under each image so I can have:

Image1
Banner1
Image2
Banner2
Image3
Banner3
Banner4

I cannot change the html to manually placed the banners, I need to use a more advanced script JS and or jquery ..

.content {display:flex; max-width:800px;min-width:300px;gap:20px;margin:auto;}
.main { flex: 70%;}.main2 {max-width:400px;} 
.side { flex: 30%;  padding:10px;}.img {    background:blue;}.banner {  background:red;}
.img, .banner { width:100%; min-width:50px; height:50px;display:grid;place-items:center;    color: #fff;    margin:10px auto;}

<h2>Rearrange content - Place each div (banner) under each image </h2>
<div class="content">
    <div class="main">
        <div class="img">Image 1</div>
        <div class="img">Image 2</div>
        <div class="img">Image 3</div>
        <div class="img">Image 4</div>
        <div class="img">Image 5</div>
        <div class="img">Image 6</div>
        <p> Multiple DIVs with images ...
        <br>    ...
    </div>
    <div class="side">
        <div class="banner">Banner1</div>
        <div class="banner">Banner2</div>
        <div class="banner">Banner3</div>
        <div class="banner">Banner4</div>
        <div class="banner">Banner5</div>
        <div class="banner">Banner6</div>
        <div class="banner">Banner7</div>
        <div class="banner">Banner8</div>
        <div class="banner">Banner9</div>
        <div class="banner">Banner10</div>
        </div>
    </div>
<hr>
    <h2> This is how it should look </h2>
    <div class="main2">
  <div class="img">Image 1</div>
        <div class="banner">Banner1</div>
        <div class="img">Image 2</div>
        <div class="banner">Banner2</div>
        <div class="img">Image 3</div>
        <div class="banner">Banner3</div>
        <div class="img">Image 4</div>
        <div class="banner">Banner4</div>
        <div class="img">Image 5</div>
        <div class="banner">Banner5</div>
        <div class="img">Image 6</div>
        <div class="banner">Banner6</div>
        <div class="banner">Banner7</div>
        <div class="banner">Banner8</div>
        <div class="banner">Banner9</div>
        <div class="banner">Banner10</div>
    </div>