Twitter bootstrap 使用Bootstrap 3按需隐藏/显示列

我有一个8栏/4栏设置的网站

在大中型屏幕上，我希望能够通过菜单上的按钮按需隐藏/显示4列。隐藏时，我希望8列自动扩展为全宽12列，反之亦然

---

我该怎么做呢？

嗯。。。这是我能想出的最好的解决办法。如果有人能想出更好的，请告诉我

       <p>
            <script type="text/javascript">
                function changeClass()
                {
                    var ElementCssClass = document.getElementById("main-column").className;

                    if ( ElementCssClass == "col-md-8 column" ) {
                        document.getElementById("main-column").className = "col-md-12 column";
                    }
                    else if ( ElementCssClass == "col-md-12 column" ) {
                        document.getElementById("main-column").className = "col-md-8 column";
                    }
                    ElementCssClass = "";
                    $('#side-column').toggle();
                }
            </script>
            <button class="button" onclick="changeClass();">Click to Show/Hide SideColumn</button>
        </p>