Ah, you mean the sidebar. That wasn’t in your original post, so I was a bit lost.
Yes, you’re right. Nice find!
On a desktop, it’s a bug that would mostly affect web developers demonstrating responsiveness 🙂
– Starting with a small screen, on a page with a left sidebar, the page initialises with the content first (this is Good). As the page reflows as you resize, using the underlying twitter bootstrap, you will see the left sidebar on the right.
– Starting with a left sidebar on a wide screen, the page reflows as you resize. As you get smaller, the page reflows to show the sidebar first (again, as per twitter bootstrap). A reload in the middle is then crucial to forcing the behaviour you describe, because on reload the content is shown before the sidebar. Resizing to get a big viewport again means that the left sidebar is on the wrong side.
I presume Nicolas (or Bootstrap?) is deliberately checking the viewport at the beginning, to make sure that the content comes up top. (Which is the right thing to do: I wouldn’t want a site that showed a sidebar first.)
It’s somewhat academic on a desktop browser — albeit irritating — as a reload will sort things out.
But on a tablet it’s very problematic, I agree.
On the iPad, both landscape and portrait show the two sidebars next to the content, with no initial reflowing. So switching from one to the other makes no difference to the order.
Which tablet hardware are you using? I presume an iPad mini type size? (I don’t have one, so cannot check).
In terms of a solution, we’re between a rock and a hard place. You either show the sidebar first on a small screen and the site is a mega-fail from a content point of view. Or you show the content first and it reflows the left sidebar to the right when you turn the tablet.
Any possible solution that means reloading the page as you turn the tablet is a no-starter, as users would not appreciate what they would perceive as a broken site (turning a tablet is, and should be, immediately responsive; there shouldn’t be a reload).
Now I think I know why we see so many sites these days with only right sidebars. It resolves this problem neatly! Note that it’s not a flippant comment. I’ve been seriously searching sites that I know are well-written and responsive and a lot of them have right sidebars. Even 2 sidebars on the right, e.g. http://css-tricks.com/
Could you try newsweek.com (which is built on bootstrap 3) on your device and tell me what happens to the “Drill downs” section in landscape and portrait? On the iPad, it’s side-by-side with the articles all the time. I’d be interested to see if it splits one way on your device landscape and another in portrait.
The pragmatic solution is of course to only use right sidebars.
I fear there may be no easy and perfect solution to this, but maybe nikeo’s got something up his sleeve that he can dynamically check with javascript.
