CSS Alternating-Column Layout (Flexbox)

CSS Alternating-Column Layout (Flexbox)

Awesomeness responsive layout using SCSS.

One of my friends on a Facebook Group posted the following question.

Screenshot 2015-11-12 16.14.16

So she wanted to do an alternating responsive layout of two boxes. The trouble with that is though, is when pushed through to a single column; it’ll alternate so that on the first one, the picture is on top, and on the next one, the picture will be on bottom.


And our styling, in SCSS

Here i’m using a technique to get each row to be the same height, and for each row to have two columns. I’m using Article and Aside instead of Divs, because, heck, why the hell not.

Demo so far…

And now we want to ‘swap’ every other one, so they alternate

View demo so far

And let’s makes this responsive

If we’re on mobile, we’d want everything to be in a single column, but keep in mind that because of how we’ve done it above, it’ll always go in the right order. I’m using 768px as the breakpoint, because that’s what Bootstrap does – and Bootstrap has lots very clever people making it; far cleverer than I.

To ‘see’ the minimum without running for your mobile device, just make the width of the window smaller.

And this is how it looks

Now let’s tidy it up and make it pretty

I’m going to add some aligning and content, the main thing is to make the Articles and Asides into Flex boxes, and align/justify it’s contents so it fits into the centre.

I’m also going to give the main container a max-width, remove the borders and generally make things look Pretty. This is purely cosmetic at this stage, we’ve done the hard bit. Keep in mind that I’m not a designer and I wear Hawaianne shirts, so if my tastes aren’t to your liking, it’s probably because one of the two of us are being rubbish.

Final Demo

In all of these, you’ll note there’s a @import “alternating-common”;. I’m using this to import all common selectors. There is also a Reset which was taken from Codepen. You don’t really need the Header ones, but they’re in there for the demos.

Paul's Bootstrap Buddy