Перемещение боковой панели 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>

У меня есть 2 значка для изменения размера видеоплеера, вроде функции YouTube. Щелчок по ним изменяет размер видеоплеера, для этого я использую JQuery.

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";
}

Моя проблема в том, что при переходе на большой проигрыватель столбец видеопроигрывателя переполняет (фактически недополняет) боковую панель. Как я могу переместить боковую панель под видеоплеером, если пользователь хочет посмотреть видео на более крупном плеере? Я пытался поиграться с col-sm-md-lg, а также пробовал clearfix, но безуспешно. Определение атрибута maxwidth важно, так как там также есть холст поверх видео.