{"id":2468,"date":"2014-05-13T07:46:35","date_gmt":"2014-05-13T06:46:35","guid":{"rendered":"http:\/\/www.maratz.com\/blog\/?p=2468"},"modified":"2014-05-13T11:04:53","modified_gmt":"2014-05-13T10:04:53","slug":"rwd-rearrange-content-in-a-multicolumn-layout-without-flexbox","status":"publish","type":"post","link":"https:\/\/www.maratz.com\/blog\/archives\/2014\/05\/13\/rwd-rearrange-content-in-a-multicolumn-layout-without-flexbox\/","title":{"rendered":"RWD: Rearrange content in a multicolumn layout without flexbox"},"content":{"rendered":"

If you ever needed to rearrange the order of content sections at different breakpoints, but avoid CSS flexbox and the local CSS context it creates then this method that utilises negative margin float is perfect for you. Reordering sections in a linear fashion is easily done with flexbox. However, offsetting the section that is positioned as second in the HTML code and shifting it to the sidebar as soon as the viewport width can accommodate multiple columns \u2014 might be a problem. If you have trouble imagining this setup, take a look at the demo<\/a>.<\/p>\n

\n\"The
The result of the sections rearrangement.<\/figcaption><\/figure>\n

<\/p>\n

This case isn\u2019t applicable to every project, but there are times when it\u2019s the only sensible option, for instance when the second section is a piece of interface that doesn\u2019t have to follow the linear flow of the rest of the content on desktop screens, but might be important on mobile screens. One such case might be opening hours for a restaurant or a museum, that can be conveniently moved aside on desktop screens.<\/p>\n

The example shown below is very simple and is suitable for a 40% wide sidebar layout. For more ratios see the accompanying demo<\/a>. This technique is dependent on box-sizing: border-box, so keep that in mind when testing in browsers that don\u2019t support that property. <\/p>\n

* { box-sizing: border-box; }\r\n.wrapper { float: left; width: 100%; padding-left: 40%; }\r\n.first   { float: left; width: 100%; padding-left: 10px; }\r\n.second  { float: left; position: relative; left: -100%; width: 66.66666666%; margin-left: -66.66666666%; } \r\n.third   { float: right; width: 100%; padding-left: 10px; }\r\n\r\n<div class=\"wrapper\">\r\n    <div class=\"first\">Primary content<\/div>\r\n    <div class=\"second\">Secondary content<\/div>\r\n    <div class=\"third\">Tertiary content<\/div>\r\n<\/div> \r\n<\/code><\/pre>\n
The trickiest part is getting percentages right. I\u2019ve written about how to calculate percentages in multicolumn layouts<\/a> before. In a nutshell, use the following formula to determine the value for both the width and the negative margin of the off-set section.<\/p>\n
container\u2019s left padding in % = x\r\noffset element\u2019s width in % = (x \/ (100 - x)) * 100\r\n<\/code><\/pre>\n
A few examples:<\/p>\n
container\u2019s left padding in % = 50\r\noffset element\u2019s width in % = (50 \/ (100 - 50)) * 100 = 100\r\n\r\ncontainer\u2019s left padding in % = 40\r\noffset element\u2019s width in % = (40 \/ (100 - 40)) * 100 = 66.66666666\r\n\r\ncontainer\u2019s left padding in % = 33.33333333\r\noffset element\u2019s width in % = (33.33333333 \/ (100 - 33.33333333)) * 100 = 50\r\n\r\ncontainer\u2019s left padding in % = 25\r\noffset element\u2019s width in % = (25 \/ (100 - 25)) * 100 = 33.33333333\r\n\r\ncontainer\u2019s left padding in % = 20\r\noffset element\u2019s width in % = (20 \/ (100 - 20)) * 100 = 25\r\n<\/code><\/pre>\n
For the opposite arrangement, i.e. the second section floated to the right, switch the direction of floats (including the other two sections), paddings and margins. Easy!<\/p>\n","protected":false},"excerpt":{"rendered":"
If you ever needed to rearrange the order of content sections at different breakpoints, but avoid CSS flexbox and the local CSS context it creates then this method that utilises negative margin float is perfect for you. Reordering sections in a linear fashion is easily done with flexbox. However, offsetting the section that is positioned […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[18],"tags":[80],"_links":{"self":[{"href":"https:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/posts\/2468"}],"collection":[{"href":"https:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/comments?post=2468"}],"version-history":[{"count":10,"href":"https:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/posts\/2468\/revisions"}],"predecessor-version":[{"id":2597,"href":"https:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/posts\/2468\/revisions\/2597"}],"wp:attachment":[{"href":"https:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/media?parent=2468"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/categories?post=2468"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/tags?post=2468"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}