Is there a way to display an optional text suffix within a vertically centered flexbox/bootstrap column, specifically only on small screens? The current code I have works using "display:contents" on the span-element, but this isn't universally supported by browsers. Without using "display:contents", the text suffix ends up displayed as another column instead of flowing with the previous text. Is there a different approach to achieve this desired effect?
<div class="row">
<div class="col-2">
<img src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" width="100" height="300">
</div>
<div class="col d-flex align-items-center">
Title text Title Text
<span class="d-lg-none" style="display:contents">
(Optional column is here on small devices)
</span>
</div>
<div class="col-2 d-none d-lg-flex align-items-center">
Optional column
</div>
</div>