Bootstrap 4: вертикальная линия в мобильном и полноэкранном режимах

Question

как это выглядит в настоящее время:
как это должно выглядеть:

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

x = некоторое изображение с названием ниже, I = вертикальный час

Мобильный телефон:

| х я х |
| х я х |
| х |

полный экран:
"| x I x I x I x I x |"

мой текущий html-файл (без использования scss, css и т. Д.). {{. }} части взяты из фреймворка hugo, который я использую, и представляют текст. В настоящее время я удаляю каждую попытку размещения вертикальной линии. надеюсь, кто-нибудь может помочь мне с моей проблемой.

{{ $file := index $.Site.Data (.Get "folder") (.Get "file") }}
<section class="five-icon">
   <div class="container">
     <h2 class="text-center mb-3">{{ $file.title }}</h2>
     <div class="row text-center d-flex justify-content-center">
      {{ range $file.images}}
        <div class=" col-xl-2 col-lg-2 col-md-4 col-sm-6 col-6">
	<img class="img-fluid" src="{{ .img_path }}" alt="{{ .img_alt }}" title="{{ .img_title }}">
	<div class="mt-3">
	  <b class="text-center bold c-white">{{ .title_bold }} </b>
	  <p class="text-center c-white" style="hyphens: auto;">{{ .title }}</p>
	</div>
        </div>
      {{end}}
      </div>
    </div>
</section>