Bootstrap выпадающий div от строки, которая охватывает весь контейнер

Question

У меня есть строка начальной загрузки с числом n 150x150 изображений.У меня есть эта js fiddle здесь: https://jsfiddle.net/tzachary89/4dnva3p4/

Всякий раз, когда нажимается одно из этих изображений, я пытаюсь получить что-то похожее на это: https://i.imgur.com/j7gaLLt.png

Поэтому, когда у меня есть изображениеэто нажатие, я хочу, чтобы div, чтобы показать, что охватывает основные строки.Div может оказаться выше, чем тот, что на картинке.

как я могу получить мое выпадающее меню, чтобы охватить весь ряд и покрыть ряд под ним?(без нажатия на нижний ряд вниз)

<div class="container">
  <div class="row" style="background-color:#8faad8;">
    <div class="col-xl-2 col-lg-2  col-md-3 col-sm-4 col-5" style="margin: 2px 0px 0px 0px;" id="tile1">
      <img src="https://rfclipart.com/image2/thumbnail/3b-3b-f2/head-with-beard-and-hair-Download-Royalty-free-Vector-File-EPS-359793.jpg">
  <div class="container" style="background-color: white;">
    <div class="row">
      <div class="col-md-2">
        <button class="btn btn-primary">asdf</button>
        <button class="btn btn-primary">asdf</button>
      </div>
    </div>
  </div>
</div>
 </div>
 </div>