Simple arrows beside image Bootstrap - html

Question

I have a very trivial problem. I just needed two simple arrows (left and right) vertically aligned to the middle to the image. Arrows have to be responsive and become smaller with screen size.
My code now is just:
<div class="row">
<div class="offset-md-1 col-md-1">
<i class="fa fa-arrow-left" style="position:relative; top:50%"></i>
</div>
<div class="col-md-8 detail_pic">
<img src="#image" style="width:80%;">
<h2 style="text-align:center;">#Title</h2>
</div>
<div class="col-md-1">
<i class="fa fa-arrow-right" style="position:relative; top:50%"></i></div>
</div>
</div>
This looks like the image below. But it doesn't work well when I size down the screen as the cols get stacked over each other. How do I get the arrows and the image in one col and make them responsive?

Answer 1

For the image size...you can have automatically resizing arrow icons by using viewport units like this img{ width: 2vmin} which listens to the shorter of the width/height dimensions in your viewport, and uses a percentage of this dimension... css tricks link for more info css-tricks.com/fun-viewport-units
For positioning the arrows in the center of the div use
img{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
a helpful article on flexbox vertical centering phillipwalton.com