code_boot_top3

responsive layouts, sometimes you want to change the natural order of the floating divs to stack themselves from bottom to top instead of top to bottom. Here's an example of where I did this for a Contact Us page that had a sidebar. I wanted the sidebar at the top and the contact us form at the bottom. #content-and-sidebar-wrapper{ display: flex; flex-direction: column; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; /* optional */ -webkit-box-align: start; -moz-box-align: start; -ms-flex-align: start; -webkit-align-items: flex-start; align-items: flex-start; } #content-area #content-area-right { -webkit-box-ordinal-group: 2; -moz-box-ordinal-group: 2; -ms-flex-order: 2; -webkit-order: 2; order: 2; float:none; } #content-area #sidebar { -webkit-box-ordinal-group: 1; -moz-box-ordinal-group: 1; -ms-flex-order: 1; -webkit-order: 1; float:none; }