Javascript 切换侧面板时调整列的大小

我采用了一种简单的CSS样式，将一行拆分为12列

我尝试制作三个面板：侧边栏（展开时应占据左侧的3列，收缩时为0列）、切换面板（应占据1列），然后是内容面板（应占据11列）

当我按下切换按钮时，侧边栏应该可见，切换和内容面板应该缩小以适应此扩展（而不是像当前那样移动到新行，因为总列数现在大于12）。我怎样才能做到这一点

编辑

下面是一段被截取的代码：

函数openSidebar（）{
log（“openSideBar（）”）；
如果（$（“#侧边栏”）是（“：可见”））{
$（“#侧边栏”）.hide（）；
}否则{
$（“#侧边栏”）.show（）；
}
}

*{
框大小：边框框；
保证金：0；
}
[类别*=“列-”]{
浮动：左；
填充：2vh；
宽度：100%；
}
.col-1{宽度：8.33%；}
.col-2{宽度：16.66%；}
.col-3{宽度：25%；}
.col-4{宽度：33.33%；}
.col-5{宽度：41.66%；}
.col-6{宽度：50%；}
.col-7{宽度：58.33%；}
.col-8{宽度：66.66%；}
.col-9{宽度：75%；}
.col-10{宽度：83.33%；}
.col-11{宽度：91.66%；}
.col-12{宽度：100%；}
.行：：之后{
明确：两者皆有；
内容：“；
显示：表格；
高度：自动；
}

下面是向右滑动的侧边栏的内容
切换
当侧边栏展开时，此面板应收缩。

使用jquery动画功能切换侧栏。为侧边栏使用自定义类，而不是col-3

函数openSidebar（）{
$（“#侧边栏”）。设置动画({
宽度：“切换”
});
}

正文{
填充：0；
保证金：0；
}
.行{
显示器：flex；
}    
.测试{
宽度：25%；
}
.col-1{
宽度：8.33%；
溢出：隐藏；
}

下面是向右滑动的侧边栏的内容
切换
当侧边栏展开时，此面板应收缩，而不是移动到新行。自动宽度

Hi，请尝试为此提供stackblitz应用程序，以便我们可以了解您现在的体验。@Rich我添加了一个代码段。我基本上不希望红色的“内容”面板移动到新行，而是希望红色和黄色面板收缩，以便在切换时为绿色面板留出空间。谢谢——这几乎可以完美地工作！但是，（1）是否可以不使用引导（

）和（2）如果在

中嵌入

，如果不包含引导，则无法工作。