HTML CSS
<div id="main">MAIN</div> <div id="side">SIDE</div>
01
2 COLUMNS ON BIG SCREENS body { display: flex; } #main { flex-grow: 1; } #side { width: 30%; }
1 COLUMN ON SMALL SCREENS @media screen AND (max-width:768px) { body { flex-wrap: wrap; } #main, #side { width: 100%; } }
01
<div id="side"> <button id="tog" onclick=" document.getElementById('side') .classList.toggle('open')"> TOGGLE </button> SIDE </div>
02
<div id="main">MAIN</div>
2 COLUMNS ON BIG SCREENS body{ display: flex; } #main { flex-grow: 1; } #side { width: 200px; }
02
HIDE TOGGLE BUTTON #tog { display: none; }
ON SMALL SCREENS @media screen AND (max-width:768px) { SHOW TOGGLE BUTTON #tog { display: block } COLLAPSED SIDEBAR BY DEFAULT #side { width: 50px; } EXPAND SIDEBAR #side.open { width: 200px; } }
02
<div id="main"> <button class="tog" onclick="document. getElementById('side').classList.remove ('open')"> CLOSE </button> MAIN </div>
03
<div id="side"> <button class="tog" onclick="document. getElementById('side').classList. add('open')"> OPEN </button> SIDE </div>
2 COLUMNS ON BIG SCREENS body { display: flex; } #main { flex-grow: 1; } #side { width: 30%; }
03
HIDE TOGGLE BUTTONS .tog { display: none; }
ON SMALL SCREENS @media screen AND (max-width:768px) { SHOW TOGGLE BUTTONS .tog { display: block }
03
FULLSCREEN SIDEBAR #side { position: fixed; top: 0; left: 0; z-index: 999; width: 100vw; height: 100vh; visibility: hidden; opacity: 0; } #side.open { visibility: visible; opacity: 1; } }