Возможно ли сверстать это без повтора одного из блоков?

Question

[html_newbie]

У меня есть код

<div class="container-fluid list-group-item-secondary">
	<div class="row">
		<div class="col text-center d-none d-sm-block">
			Текстовый заголовок
		</div>
		<div class="col-auto ms-auto text-center">
			<a href="#">Ссылка 1</a>
		</div>
		<div class="col-auto text-center">
			<a href="#">Ссылка 2</a>
		</div>
		<div class="col-auto text-center">
			<a href="#">Ссылка 3</a>
		</div>
	</div>
	<div class="row d-block d-sm-none">
		<div class="col text-center">
			Текстовый заголовок
		</div>
	</div>
</div>

который реализует такое поведение

Возможно ли изменить код чтобы блок "Текстовый заголовок" не повторялся, а какими-то параметрами Bootstrap (версия 5.1) перемещался?

Answer 1

[Rsa97]

Comments

[html_newbie]

Благодарю, но хотелось бы использовать только классы Bootstrap. Возможно ли это?

[Rsa97]

html_newbie, Возможно. У всех этих CSS-свойств есть аналогичные классы в Bootstrap.

[html_newbie]

Rsa97, не могли ли бы вы подсказать нужные классы Bootstrap, пожалуйста?

[Rsa97]

html_newbie, Они называются практически так же, как соответствующие свойства CSS.
d-flex, flex-row-reverse и т.д.

[html_newbie]

Спасибо. Не могли ли бы подсказать еще: возможно ли сверстать на флексах такой вариант?

[Rsa97]

html_newbie, Не знаю, ничего не приходит на ум.