Reorder columns

[visualcookie]

Would like to reorder columns as discussed on Twitter: http://twitter.com/visualcookie/status/628202377561161729

Bootstrap example: https://scotch.io/tutorials/reorder-css-columns-using-bootstrap

[esr360]

Thanks - will have a think about how this might be possible given the current code base.

[visualcookie]

Exact description of the behavior followed

Normal col order: 1 - 2 - 3 - 4 Wanted col order: 1 - 3 - 2 - 4

[esr360]

Ah, this is a lot more complicated than just reversing the complete order.

So, are you wanting the ability to completely specify any order? Or are you wanting to reverse only the middle columns, so not including the first and last one?

[visualcookie]

Just want to reorder them like in the above example. Sometimes I got like three columns floating, where the middle column should be the first column on responsive and the first column the second.

That's why I used the display: table-header-group; on the column that should come first instead of second but as already written on Twitter, this only would work for smaller screens. If you got a larger screen, you won't be able to reorder the columns like that.

I'm currently looking for a solution there to work well with Kayzen though. Won't be easy.

Update: Wow. Bootstrap is doing a pretty hackable "trick". They use another class on the element col-push-5 and push the column with a left: xxx% of the column-width.

[esr360]

Yeah, I've never actually properly looked into the underlying code as to how Bootstrap do it, but I did always suspect it would be a fairly hacky approach.

I'm not convinced such CSS hackery is any better than JavaScript. And to be honest, the behaviour we are discussing could almost be considered functionality instead of presentation. We are attempting to dynamically change the order of content. But as mentioned on Twitter - I wouldn't use a JS approach, but it seems silly to instead use a very hacky CSS approach for the sake of having a CSS only solution.

So currently we have somewhat elegant CSS only solutions for:

• reversing the order of columns
• setting a specific column to be at the top for smaller devices

This is already more than I would have thought was possible. But let's keep experimenting :)

[visualcookie]

Definitely. Never thought we could come this far. I keep an eye out, maybe I find a better solution that's not hacky at all.

Thanks for your time so far. :+1:

[esr360]

Column re-ordering and ability to push/pull columns now added to version 2.