Скрыть/показать столбцы по запросу с помощью Bootstrap 3

Question

У меня есть сайт Bootstrap с настройкой с 8 колонками/4 колонками.

На среднем экране &, я хочу, чтобы иметь возможность скрывать/показывать по 4 столбца по требованию (с помощью кнопки в меню). Когда я спрятан, я хочу, чтобы 8-столбце автоматически расширялось до полной ширины (12-столбцов) и наоборот.

Как это сделать?

Answer 1

Ну ... Это лучшее решение, которое я мог бы придумать. Если кто-нибудь может подумать о лучшем, пожалуйста, дайте мне знать.

 <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>