Javascript 更改引导中div的列类

我发现了许多类似的问题，但似乎无法让它们的解决方案对我起作用，所以希望发布特定的代码会有所帮助

我使用部署在html页面上的Caspio数据页面。在html页面上，我有一个完整的12列div，当单击链接时，我需要将其更改为9列div。这是因为我有一个折叠的3列div，在单击链接时打开

所以我需要的是：

1页面加载时3列div折叠，12列div可见

2用户单击链接，3列div可见，12列div更改 到9列div，因此将其移动到3列div的右侧 而不是在它下面

Caspio数据页可能会变得混乱，如果css在发生时是随机的，所以我不能详细描述它，所以我需要尽可能地简单。如果我能在链接上把div class=col-md-12改为div class=col-md-9，那就太好了。我也看到过其他文章中有不断变化的专栏类，但我似乎无法让它们发挥作用

以下是我正在使用的主要代码：

---

有几种方法可以做到这一点。这里有一个

$('#btnSwitch').click(function(){
    $('.col-md-3').toggleClass('hide');
    $('#right').toggleClass('col-md-12 col-md-9');
})

HTML

---

这看起来真的很好-非常感谢。我只需要把它倒过来。这意味着在页面加载时，第2页div通常显示在12列，第1页div隐藏。然后，单击按钮时，显示第1页第3栏，并将第2页第3栏转换为第9栏。我在玩弄剧本，但似乎弄不好。有一个快速切换吗？好的，我使用了折叠，然后切换脚本。这真是太好了，非常感谢这个简单、优雅的解决方案。很抱歉，我不知道该在哪里“接受”这个答案。这是我在SO上的第一篇帖子。我会找的。再次感谢您的帮助。意识到复选标记是接受链接-如果有“接受”这个词，对第一次使用它的人来说会更容易。事实上，我已经开始了，谢谢你的帮助。

<div class="container-fluid">
    <div class="row">
        <div class="col-md-3">
                page1
        </div>
        <div class="col-md-9" id="right">
                page2
        </div>
    </div>
    <br>
    <button class="btn btn-lg" id="btnSwitch">Switch</button>
</div>