Bootstrap - div z position absolute nie łapie się pod responsywność, da się to zmienić?

Question

Witam,

stworzyłem sobie trójwymiarową kostkę, w której będę wyświetlał zawartość mojej strony. Stronę mam w bootstrapie, ale ta kostka, żeby się trzymała musi być w divach z position absolute. Poniżej załączam kod:

HTML:

<main>
		<div class="container">
			<div class="row">
				<div class="col-sm-12">
					<div class="content">
						<div class="scene">
							<div class="cube">
							    <div class="cube-face  cube-face-front">
							    </div>
							    <div class="cube-face  cube-face-back">
                                                            </div>
							    <div class="cube-face  cube-face-left">
                                                            </div>
							    <div class="cube-face  cube-face-right" id="style-3">
							    </div>
							    <div class="cube-face  cube-face-top">
							    </div>
							    <div class="cube-face  cube-face-bottom">
						    		</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</main>

CSS:

.content{
	text-align: center;
	max-width: 100%;
	height: auto;
}


/* CUBE */

.scene {
	margin-top: 150px;
	margin-bottom: 150px;
	width: 400px;
	height: 400px;
	  
	perspective: 600px;
}
.cube{
	width: inherit;
	height: inherit;
	transform-style: preserve-3d;
	transition: transform 0.6s;
}
.cube-face{
	overflow: auto;
	width: inherit;
	height: inherit;
	position: absolute;
	background: black;
	opacity: 0.8;
}
.cube-face-front {
	background: radial-gradient(at left top, white 5%, black 60%);
	transform: translate3d(0, 0, 200px);
} 
.cube-face-back {
	background: radial-gradient(at left top, white 5%, black 60%);
	transform: rotateY(180deg) translate3d(0, 0, 200px);
} 
.cube-face-left {
	background: radial-gradient(at left top, white 5%, black 60%);
	transform: rotateY(-90deg) translate3d(0, 0, 200px);
} 
.cube-face-right {
	background: radial-gradient(at left top, white 5%, black 60%);
	transform: rotateY(90deg) translate3d(0, 0, 200px);
} 
.cube-face-top {
	background: radial-gradient(at left top, white 5%, black 60%);
	transform: rotateX(90deg) translate3d(0, 0, 200px);
} 
.cube-face-bottom {
	background: radial-gradient(at left top, white 5%, black 60%);
	transform: rotateX(-90deg) translate3d(0, 0, 200px);
}

Ma ktoś jakiś pomysł co zrobić, żeby ta kostka(cube) skalowała się jak ten div content, czyli działała jak bootsrap przykazał?