Creating responsive CSS-Layout with nested containers

I got the following constellation of <div>-elements:

<div class="root">
    <div class="mainContainer">
        <div class="menuBarContainer"></div>
        <div class="appBoxContainer"></div>
    </div>
    <div class="sidebarContainer"></div>
</div>

Now, I want them to arrange on my page as depicted in the follwing picture:

Which would be the best way to arrange the <div> in CSS? My problem is that the boxes try to fit in one line, even if I set the width-attribute to 100%. I want the site to be fully responsive and the sidebarContainer-element is linked to a button which toggles its visibility.

What can I do to make the mainContainer-element take the full width of the page (root) when the sidebar is invisible (width: 0)?

Thanks in advance!