Html 当浏览器调整大小或在不同设备上时，引导没有响应

我建立了一个简单的引导网站，当浏览器在不同的设备上调整大小或查看时，我很难让它响应。我已经为不同的尺寸添加了尺寸，如“lg、sm、md、xs”等，但它仍然不起作用。其中一个问题是我有4个视频div，它们的宽度似乎比上面的视频稍长。

调整浏览器大小时，假定视频与设备/浏览器的底部对齐，顶部视频填充其余部分。如果使用xs大小，我希望视频垂直排列，并将其设置为左栏消失的位置。所以，我几乎不希望在调整大小时使用空格，并保持与在大视图中相同的大小，但直到它们变为xs大小。这是我代码的链接

测试


| 
这是一些文本

尝试删除左侧的填充：0

.no排水沟>[class*='col-']{

padding-right:0;

padding-top:0;
padding-bottom:0;

}

padding-right:0;

padding-top:0;
padding-bottom:0;