значки в нижней части адаптивного изображения (всегда внизу столбца начальной загрузки)

Question

Можно ли сделать эти 2 круга всегда справа и слева от нижней части изображения? Они должны быть всегда один слева внизу, второй справа внизу изображения - когда я изменяю размер изображения. (они всегда должны прилипать к нижним углам изображения) Как их расположить?

enter code here

Codepen: <a href="https://codepen.io/anami90/pen/KeEqRw?editors=1100" rel="nofollow noreferrer">https://codepen.io/anami90/pen/KeEqRw?editors=1100</a>

Answer 1

Я хотел бы расположить эти 2 круга, как показано на рисунке ниже: введите описание изображения здесь

Answer 2

согласно твоему вопросу, круги должны появиться на внешнем столбце, не так ли? надеюсь, это поможет:

div {
  height: 100vh;
}
.col-3 {
  background: lightgreen;
}
.col-6 {
  background: pink;
  padding: 0;
  display: flex;
  align-items: center;
  position: relative;
}
.circle-left {
  display: inline-block;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: yellow;
  position: absolute;
  left: 0;
  bottom: 0;
}
.circle-right {
  display: inline-block;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: red;
  position: absolute;
  right: 0;
  bottom: 0;
}
img { 
  width: 100%;
  height: auto;
  vertical-align: middle;
}
<div class="row">
  <div class="col-3">col-3</div>
  <div class="circle-left"></div>
  <div class="col-6">

    <img src="https://www.w3schools.com/w3css/img_lights.jpg"/>

  </div>
  <div class="col-3">col-3</div>
  <div class="circle-right"></div>
</div>

https://codepen.io/anon/pen/zabLoq?editors=1100