Last active
January 19, 2018 14:06
-
-
Save AlanSimpsonMe/2ce92bab9aed14fa1a05d47793d90d68 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <meta http-equiv="X-UA-Compatible" content="ie=edge"> | |
| <title>Document</title> | |
| <style> | |
| /* Generic styling (all screen widths) */ | |
| * { | |
| box-sizing: border-box | |
| } | |
| body { | |
| margin: 0; | |
| } | |
| #cols { | |
| width: 100%; | |
| display: flex; | |
| } | |
| #leftcol, | |
| #rightcol { | |
| width: 20%; | |
| background: #eee; | |
| padding: 8px; | |
| } | |
| #maincol { | |
| padding: 8px; | |
| } | |
| /* Wider screen */ | |
| @media only screen and (min-width: 501px) { | |
| #cols { | |
| flex-direction: row; | |
| } | |
| #leftcol, | |
| #rightcol { | |
| width: 20%; | |
| background: #eee; | |
| } | |
| #maincol { | |
| width: 60%; | |
| } | |
| } | |
| /* Narrower screen */ | |
| @media only screen and (max-width: 500px) { | |
| #cols { | |
| flex-direction: column; | |
| } | |
| #maincol { | |
| order: 1; | |
| width: 100%; | |
| } | |
| #leftcol { | |
| order: 2; | |
| width: 100%; | |
| } | |
| #rightcol { | |
| order: 3; | |
| width: 100%; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="cols"> | |
| <div id="leftcol"> | |
| Left column | |
| </div> | |
| <div id="maincol"> | |
| Main column | |
| </div> | |
| <div id="rightcol"> | |
| Right column | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment