how to share the same div in two places - html

Question

I want to share the same player not sure how to go about this without javascript and without duplicated player.
Basically, I have the following for mobile:
<div class="d-block d-lg-none d-xl-none d-xxl-none">
<div id="player"> <!-- video player here --> </div>
</div>
And for desktops:
<div class="d-none d-lg-block d-xl-block d-xxl-block">
<div class="container">
<div class="row">
<div id="player"> <!-- same video player here --> </div>
</div>
</div>
</div>
Is there a way to achieve this?
Update: When a user have a desktop browser open that doesn't take all the screen it will show (probably) the first block of code when he adjust so it will take the full screen it will show the second block of code how can I keep the player in his current state from the first block of code to the second one or somehow move it keeping its state?

Answer 1

.d-block{
display:none;
}
#media (max-width: 800px){
.d-block{
display:block;}
.d-none{
display:none;}
}
<div class="d-block d-lg-none d-xl-none d-xxl-none">x
<div id="player"> <!-- video player here --> </div>
</div>
<div class="d-none d-lg-block d-xl-block d-xxl-block">y
<div class="container">
<div class="row">
<div id="player"> <!-- same video player here --> </div>
</div>
</div>
</div>

Answer 2

You can use css media queries to get your result. It'll resize the div based on the viewport width.