CSS - левая и правая DIV со 100% шириной

Question

В настоящее время я использую Bootstrap для своего сайта с left sideBar navigation.

В main content у меня есть 2 контейнера для left и right.

What I want is like the image below and i already done this: 

and when the toggle button is clicked then the `rightDiv` will resize 
which is my main problem and i'm not able to do: 

and when the browser/device is small lets say mobile device then it be 
like this and i already done this. 

Я могу сделать первое и третье изображение, но не на втором изображении, который будет изменять размеры rightDiv нажата кнопка переключения.

до сих пор у меня есть это в моем HTML:

<div id="wrapper"> 
     <!--Start of Sidebar navigation --> 
     <div id="sidebar-wrapper"> 
      <ul class="sidebar-nav"> 
       <li> 
        <a href="#"><span>Home</span></a> 
       </li> 
       .... 
      </ul> 
     </div> 
     <!-- End of Sidebar navigation--> 
     <!-- Start Main Content --> 
     <div id="page-content-wrapper"> 
      <div class="container-fluid"> 
       <div class="row"> 
        <!--START OF LEFT DIV--> 
        <div class="row-post-container"> 
        </div> 
        <!--END OF LEFT DIV--> 
       </div> 
       <!--START OF RIGHT DIV--> 
       <div class="main-right-side-container"> 
        <div class="right-side-container"> 
         .... 
        </div> 
       </div> 
       <!--END OF RIGHT DIV--> 
       </div> 
      </div> 
     </div> 
     <!-- END Main Content --> 
    </div> 

и в моем CSS у меня есть это для левой и правой боковой панели DIV:

.row-post-container{ 
    display: table-cell; 
    float: left; 
    max-width: 800px; 
    width: 100%; 
    min-width: 300px; 
    margin-right: 20px; 
}.main-right-side-container{ 
    display: table-cell; 
    min-width: 300px; 
    width: 100%; 
    max-width: 300px; 
    vertical-align: top; 
    height: 300px; 
    float: left; 
    padding: 0px; 
    margin-top: 20px; 
} 

Любой имеет идею?

Для уточнения, пожалуйста, спросите меня.

Пожалуйста, предлагайте только CSS.

Thak you very much.

EDIT: оранжевый левыйDiv и темно-зеленый с правой стороны оранжевого цвета RightDiv.

Answer 1

Одна из основных вещей, которые вы не рассматриваете, - это колонки начальной загрузки.

Я изменил ссылку на ссылку, которую вы мне дали, и дублировали, чтобы иметь два столбца вместо одного.По умолчанию это текущий скелет или, вернее, структура кода в примере -

Текущая реализация на примере сайта

<div id="wrapper"> 

    <!-- Sidebar --> 
    <div id="sidebar-wrapper"> 
    </div> 
    <!-- /#sidebar-wrapper --> 

    <!-- Page Content --> 
    <div id="page-content-wrapper"> 
     <div class="container-fluid"> 
      <div class="row"> 
       <div class="col-lg-12"> 
        <!-- your code here --> 
       </div> 
      </div> 
     </div> 
    </div> 
    <!-- /#page-content-wrapper --> 

</div> 

Изменить, чтобы добавить столбцы, как показано ниже -

Здесь я предлагаю вам продолжить добавление большего количества столбцов -

<!-- Page Content --> 
    <div id="page-content-wrapper"> 
     <div class="container-fluid"> 
      <div class="row"> 
       <div class="col-lg-8"> <!-- your leftDiv code here --> </div> 
       <div class="col-lg-4"> <!-- your rightDiv code here --> </div> 
      </div> 
     </div> 
    </div> 
    <!-- /#page-content-wrapper --> 

Answer 2

Сначала попробуйте сделать в полной мере использовать классы начальной загрузки, проверьте this-

HTML-

<p><input type="button" id="showHideBtn" value="Slide Menu"></p> 

<div id="sidebar-wrapper col-md-3"> 
    <ul class="sidebar-nav"> 
     <li> 
      <a href="#"><span>Home</span></a> 
     </li> 
     .... 
    </ul> 
</div> 

<div id="page-content-wrapper" class="col-md-9"> 
    <div class="container-fluid"> 
     <div class="row"> 
      <!--START OF LEFT DIV--> 
      <div class="col-xs-12 col-md-9 row-post-container"> 
      </div> 
      <!--END OF LEFT DIV--> 

     <!--START OF RIGHT DIV--> 
      <div class="col-xs-12 col-md-3 main-right-side-container"> 
      </div> 
     <!--END OF RIGHT DIV--> 
     </div> 
    </div> 
</div> 

CSS -

.hide{display:none !important;}

JS -

$('#showHideBtn').click(function(e){ 
    $('#sidebar-wrapper').toggleClass('hide'); 
    if($('#page-content-wrapper').hasClass('col-md-9')){ 
     $('#page-content-wrapper').removeClass('col-md-9'); 
    }else{ 
     $('#page-content-wrapper').addClass('col-md-9'); 
    } 
});