我采用一种简单的CSS样式，将一行分为12列。
我正在尝试制作三个面板：侧边栏（展开时应占据左侧3列，收缩时应占据0列），切换面板（应占据1列），然后是内容面板（应该占据11列）
当我按下切换按钮时，侧栏应该变得可见，并且切换面板和内容面板应缩小以适应此扩展（而不是像现在那样移动到新行，因为列总数现在大于12 ）。我该如何实现？
编辑
下面是一段代码：
function openSidebar() {
console.log("openSideBar()");
if ($("#sidebar").is(":visible")) {
$("#sidebar").hide();
} else {
$("#sidebar").show();
}
}* {
box-sizing: border-box;
margin: 0;
}
[class*="col-"] {
float: left;
padding: 2vh;
width: 100%;
}
.col-1 { width: 8.33%; }
.col-2 { width: 16.66%; }
.col-3 { width: 25%; }
.col-4 { width: 33.33%; }
.col-5 { width: 41.66%; }
.col-6 { width: 50%; }
.col-7 { width: 58.33%; }
.col-8 { width: 66.66%; }
.col-9 { width: 75%; }
.col-10 { width: 83.33%; }
.col-11 { width: 91.66%; }
.col-12 { width: 100%; }
.row::after {
clear: both;
content: "";
display: table;
height: auto;
}<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div class="row">
<div id="sidebar" class="col-3" hidden style="background-color: green;"> here is the content of a sidebar that slides to the right</div>
<div class="col-1" style="background-color: yellow;">
<button onclick="openSidebar();">toggle</button>
</div>
<div class="col-11" style="background-color: red;">
this panel should shrink when the sidebar is expanded.
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js" integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30=" crossorigin="anonymous"></script>
</body>