Как адаптировать бутстрапный аккордион для экрана 768px?

Question

[Федя]

Подскажите, как можно адаптировать бутстрапный аккордион для бОльших разрешений так, чтобы открывающийся блок с текстом, растягивался на ширину контейнера, при том, чтобы кнопки оставались на своих местах, а выпадающий контент сдвигал нижние кнопки вниз...То есть вариант вырывать выпадашку из потока через position: absolute; не канает

Вот как есть, и должно быть на мобилке:

spoiler

Вот как должно быть на 768+ разрешении:

spoiler

Прилагаю ссылку на codepen: https://codepen.io/Omn1scient/pen/zYaJJeE

Answer 1

[ProjectSoft]

.accordion-item .accordion-collapse {
	position: relative;
	z-index: 1;
}
@media(min-width: 768px) {
	.accordion-item:nth-child(3n+1) .accordion-collapse {
		margin-right: -200%;
	}
	.accordion-item:nth-child(3n+2) .accordion-collapse {
		margin-right: -100%;
		margin-left: -100%;
	}
	.accordion-item:nth-child(3n+3) .accordion-collapse {
		margin-left: -200%;
	}
}

Ну а дальше стилизуешь сам с бордерами.

Comments

[Федя]

Спасибо, всё супер!