As yo can see, in the mobile layout I get social buttons are before the slogan. But I want to slogan before the social buttons. What should I do? Have duplicated slogan and social buttons and toggle them using media queries ? is that smart? Or use jquery to add/remove them? or there is a cleaner solution?
I think there will be a problem in your code that when screen will be small then the slogan box height will increase and then slogan box will hide to social box. Because social box is at fixed height.
I’m not sure why any of the boxes should get taller though….There is a ‘tablet’ and ‘mobile’ version in the Codepen…the structure is the same or both and the only difference between the two ‘css’ version is the positioning.
As I said, I’m not happy with it…..it was just a first pass.
Please fork it and tweak away.
I’d have to re-work it with actual media queries to get it better. I would say that I dislike using absolute positioning and try to avoid it if possible…but perhaps in this case?