En este código trato de poner una lista de cards que sean responsive (cuando la resolución sea md o superior muestre 3 cartas, cuando sea sm muestre 2), al lado de estas cartas tengo que poner un "espacio publicitario" pero no logro hacer que queden a la derecha de las cartas. No entiendo muy bien si es un problema de anidación de rows o es que algún atributo funciona diferente a como yo esperaba.
<div class="container">
<h1>Portal de películas</h1><hr>
<div class="row col-md-8 col-sm-10 row-cols-md-3 row-cols-sm-2">
<div class="card">
<img class="card-img-top" src="Imágenes/avengers.jpg" alt="AvengersEndgame">
<div class="card-body">
<h5 class="card-title">Avengers: Endgame</h5>
<p class="card-text">Abril 22, 2019</p>
</div>
<div class="card-footer">
<small class="text-muted">Actualizado hace 3 minutos</small>
</div>
</div>
<div class="card">
<img class="card-img-top" src="Imágenes/elcamino.jpg" alt="ElCamino">
<div class="card-body">
<h5 class="card-title">El Camino: A Breaking Bad Movie</h5>
<p class="card-text">Octubre 11, 2019</p>
</div>
<div class="card-footer">
<small class="text-muted">Actualizado hace 3 minutos</small>
</div>
</div>
<div class="card">
<img class="card-img-top" src="Imágenes/godzillakong.jpg" alt="GodzillaKong">
<div class="card-body">
<h5 class="card-title">Godzilla VS Kong</h5>
<p class="card-text">Marzo 25, 2021</p>
</div>
<div class="card-footer">
<small class="text-muted">Actualizado hace 3 minutos</small>
</div>
</div>
<div class="card">
<img class="card-img-top" src="Imágenes/joker.jpg" alt="Joker">
<div class="card-body">
<h5 class="card-title">Joker</h5>
<p class="card-text">Octubre 2, 2019</p>
</div>
<div class="card-footer">
<small class="text-muted">Actualizado hace 3 minutos</small>
</div>
</div>
</div>
<div class="col-md-4 col-sm-2 row-cols-md-1">
<img class="img-fluid" src="Imágenes/publicidad1.jpg" alt="Publicidad1">
<img class="img-fluid" src="Imágenes/publicidad2.jpg" alt="Publicidad2">
</div>