Moving Bootstrap sidebar

Lets define the following layout using bootstrap:

<div class="container-fluid">

    <div onclick="smallSize()">Click</div>
    <div onclick="largeSize()">Click</div>

    <div class="row">

        <!--Video player-->
        <div class="video-player-content col-7" style="max-width:720px;">
            <video id="preview" width="720px" height="360px">
                <source/>
            </video>
        </div>

        <!--Sidebar content-->
        <div class="sidebar-card col-5">
            <p>Some content</p>
        </div>  

    </div>

</div>

I have 2 icons for changing the size of the video player, kind of youtube like feature. Clicking on them changes the size of the video player, I use JQuery to achieve this.

function smallSize() {
    var video = document.getElementById("preview");
    video.height = 360;
    video.width = 720;
    document.getElementsByClassName("video-player-content")[0].style.maxWidth = "720";
}

function largeSize() {
    var video = document.getElementById("preview");
    video.height = 540;
    video.width = 1080;
    document.getElementsByClassName("video-player-content")[0].style.maxWidth = "1080";
}

My problem is, when changing to the large player, the video player col overflows (actually underflows) the sidebar. How can I push the sidebar below the video player if the user chooses to watch the video on the larger player? I tried to play around with col-sm-md-lg and also tried the clearfix, but no success. Defining the maxwidth attribute is important, as there there is also a canvas on top of the video.