RWD: Rearrange content in a multicolumn layout without flexbox

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 — might be a problem. If you have trouble imagining this setup, take a look at the demo.

The result of the sections rearrangement.

This case isn’t applicable to every project, but there are times when it’s the only sensible option, for instance when the second section is a piece of interface that doesn’t 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.

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

The trickiest part is getting percentages right. I’ve written about how to calculate percentages in multicolumn layouts 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.

Interested in more content like this?

First voice to “RWD: Rearrange content in a multicolumn layout without flexbox”

I must tell you that it’s hard to find your articles in google,
i found this one on 13 spot, you should build some quality
backlinks in order to rank your page, i know how to help you, just search in google – Arshumaker SEO tips