I want however on a device where the left column will take up too much space for it to jump below the main content on the right.
The solution to get the left down was to use flexible columns to reverse the flow.
This works fine in Firefox, Google Chrome, Internet Explorer and Opera on a desktop.
It doesn’t work on Google Chrome on an iPhone and doesn't work in Safari either on a desktop or iPhone. In both cases the left column appears above the right column.
It works on my friend's Android.
This is the html:
Expand|Select|Wrap|Line Numbers
- <div id="content">
- <div class="left">
- LEFT CONTENT
- </div>
- <div class="content">
- MAIN CONTENT
- </div>
- </div>
Expand|Select|Wrap|Line Numbers
- #content {
- clear: both;
- margin: 0 auto;
- width: 980px;
- display: inline-block;
- min-height: 600px;
- }
- .content {
- float: left;
- min-height: 500px;
- padding: 10px 10px 0 10px !important;
- width: 742px !important;
- }
- .left {
- float: left;
- padding: 10px 2px 0 10px !important;
- width: 202px !important;
- }
Expand|Select|Wrap|Line Numbers
- @media (max-width: 632px) {
- #content { width:603px; display: -webkit-flex; display:flex; -webkit-flex-direction:column-reverse; flex-direction:column-reverse; min-height: 0;}
- .content { width:583px !important; min-height: 0;}
- .left { width:583px !important;}
- }