Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <title>Demo 7 | Responsive design</title>
  <meta name="description" content="Demo 7: Responsive design">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
    <style>
      html, body {
        height: 100%;
        margin: 0;
      }
​
      body {
        display: flex;
        flex-direction: column;
        background: beige; 
      }
      
      #wrapper {
        display: flex;
        flex: 2 1 auto;
        flex-direction: row;
      }
      
      #sidebar {
        padding: 1rem;
        flex: 1 1 auto;
        background: lightgreen;
        border-right: 1px solid gray;
      }
      
      #map {
        margin: 1rem;
        padding: 1rem;
        flex: 3.14 1 auto;
        background: lightcyan;
        border: 1px solid gray;
      }
      
      #header {
        padding: 1rem;
        flex: 0 0 auto;
        background: lightgray;        
        border-bottom: 1px solid gray;
      }
      
      #footer {
        border-top: 1px solid gray;
        padding: 1rem;
        flex: 0 0 auto;
        background: lightgray;
      }
      
      @media screen and (max-width: 500px) { 
        #wrapper {
          flex-direction: column;
        }
        
        #map {
          flex: 1 1 auto;
          order: 1;
          margin: 0;
          border: none;
        }
        
        #sidebar {
          order: 2;
        }
      }
  </style>
</head>
<body>
  <div id="header">Header</div>
  <div id="wrapper">
    <div id="sidebar">Sidebar</div>
    <div id="map">Map</div>
  </div>
  <div id="footer">Footer</div>
</body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
patrickarltpro
0viewers