正在移动Bootstrap侧边栏

Question

让我们使用引导程序定义以下布局：

<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>

我有两个图标用于更改视频播放器的大小，有点像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溢出(实际上是下溢(侧边栏。如果用户选择在较大的播放器上观看视频，我如何推视频播放器下面的侧边栏？我试着和col-sm-md-lg一起玩，也试过clearfix，但没有成功。定义maxwidth属性很重要，因为视频顶部还有一个画布。

Answer 1

最终我意识到可以使用jQuery添加和删除类，所以我在我的两个onClick函数中都使用了以下方法

$("<id of element>").removeClass("<class to be removed>");
$("<id of element>").addClass("<class to be added>");