Media queries move sections around

http://page-test.co.uk/layout.html

Everything works perfect other than when the browser is <1000px. I want the sections in the order listed below instead (but keep 1000px+ the same):

MOBILE TOP NAV
CONTENT
ANOTHER SECTION
TOP NAV
LEFT NAV
LINKS
FOOTER

Also, I want it to default to the <1000px version if for example media queries is not supported. I suppose that means laying it out like the <1000px one and having CSS change it to fit the 1000px+ one, but I haven’t changed it around yet as I want to see any advice first. I can change it around if that helps.

You can’t reorder the order of the HTML elements with media queries. You could fake it, but it’s asking for trouble, as you’d need to position things, which is never a very good idea for page layout, as it would introduce all sorts of problems.

Not yet :wink: flexbox is hard-core and one of the things it can do is precisely that.

I have sometimes shuffled the order of elements around to make the display better on mobile, but it should be graceful. Like Ralph is saying, don’t resort to positioning things with absolute or excessive negative margins. You’ll just get into trouble. Be prepared to make a few compromises and make the best you can but don’t get too concerned over order.

Ok, thanks. looks like I need to change my requirements. However, I guess I could move elements around in some way. The example I posted starts with the left nav at the bottom and that moves up to the left of the content.

How about if by default we had this:

CONTENT
TOP NAV
LEFT NAV
FOOTER

…and if 1000px+ it moved to this:

TOP NAV
LEFT NAV CONTENT
FOOTER

… I think that could be possible??

Looks difficult to me. Swapping the order of elements like that is asking for trouble, if you ask me.

flexbox is hard-core and one of the things it can do is precisely that.

Heh heh, can’t wait to see how Microsoft will mess that one up. :shifty:

The problem is I can’t just leave this, so is there a way to slightly change my requirements but be able to achieve this?

As I mentioned, the example has a left-nav which starts below the content and then the left-nav moves up level to the left of the content, so this kind of method and changing my requirements is fine.

There must be a way to maybe meet half way with my requirements and keeping it graceful??

Ok, how about if I could just allow everything to flow as normal and just pull out one div box/section and stick it at the bottom?

Is that possible? How about absolute positioning? Or would that just stick it to the bottom of the page?

Yes, that’s what you’d probably have to use, but it’s messy and probably will have a lot of problems on various devices. (Lotsa pain and not much gain, I’m afraid.)

Thanks Ralph,

I have played around and come up with this:

http://page-test.co.uk/layout2.html

What about this? It seems ok to me.

Is there anything you can see that could cause me problems?

Can you improve on this code?

Thanks again for the excellent advice.

Hi ralph.m,

Would really appreciate your thoughts on this.

It seems fine to me, but I don’t have the experience you do so just wondering if anything is going to cause me problems in the future doing something like this?

It seems to work OK as is, so well done. :slight_smile: The thing to do is to test it in as many environments to make sure it doesn’t break. I guess the other question would be what’s going to happen when you add more to the page, so the main thing is to keep testing as you go.

The content will overlap if you have more than 60px worth of content because you have moved the top-nav to the top with absolute positioning and moved the other content away with a margin to match that height.

Your demo is already overlapping with the content that you have added which is over 60px in height. You can’t really use that method if you want fluid height containers but would be ok for a fixed height topnav.

You can change left and right columns easily and you can even move the footer to the top and still have fluid content but you can’t move an element that is between two others to be at the top or the bottom and still have fluid content in each.

I put up an old demo here that shows nearly all the combinations you can do with floats so if the design isn’t in this list then it probably is not possible. (The js just swaps a class in the body so that the different styles will be applied and is not needed for a real layout).

This second example shows how to move the footer from the bottom to the top and both still have fluid content (this is a solution from a previous css quiz that I set and was deemed impossible before).

Thanks Paul,

I’ve managed to use a combination of different advice to achieve sort of what I wanted. I did find some issues with the example I posted and I’ve now managed to get something completed which works well after a decent amount of testing (but not quite what I was looking for).

Thanks, and thanks for the demos.