[Solved] Swapping the locations of two divs in a media query

[xebico]

OK, I’m out of ideas and I hope I can explain this clearly.

I have a relatively simple site: A left-hand sidebar (25%) and a main section (75%). Each is a

<

div> and floated left. No problem there, it scales nicely on different screen sizes.

The two sections will vary in length depending on the latest content. (It’s a self-hosted WordPress site.)

I use media queries to change the width of those sections (among other things), so that on a tiny phone screen both divs are 100% wide, and thus stacked on top of each other.

@media all and (max-width: 799px) {
html {font-size: 14px; width:100%;}
#left { width: 100%; !important}
#sidebar { width: 100%; !important}
}

The page itself is darned simple: There’s a top div with the logo and such, and then essentially

<div id="sidebar">STUFF</div>
<div id="left">STUFF</div>

It works perfectly. But here’s the problem: The Boss wants the main section to be on top when seen on a mobile screen. But because the sidebar comes first in the HTML (so it’s on the left for larger monitors), it stacks on top of the main section.

I want to keep that sidebar to the left, but when max-width is 799 or less I want it to go under the main section.

Is there any way to swap the positions of the sidebar and main section when on a small screen, so the sidebar renders underneath?

I feel like it’s a simple solution, but I’m just not coming up with it. Thanks for any help!

[shaneisme]

You sure can!

1) Move the markup of the main content above the sidebar in your markup (so that on your mobile view it’s stacked up correctly)
2) You should actually reverse your thinking on your media query. Make the mobile view your default, and change it when it gets above a 799px with floats, etc. That way you can add the following (inside your new 799px and up query):

#sidebar {
  /* your current styles here */
  right: 75%;
  left: auto;
}
#left {
  /* your current styles here */
  left: 25%;
  right: auto;
}

[xebico]

That’s… that’s brilliant. Now to find out if it works (and if I understood it correctly.) Thank you!

[shaneisme]

I’d also recommend two more things – don’t use ID’s as your selector. ID’s are super specific, and even if they’re for super specific things you’ll find yourself fighting them at some point in the future.

Also, you could do something more semantic with the names too. If the page was going to maintain its simplicity using classes like .sidebar and .main-content (or whatever) might be better.

If you plan on making things a bit more complicated in the future, you might want to split the layout from the content even more.

You could do .sidebar, but also include its column definition with .column-1-4 for one quarter… that way you could re-use the column stuff elsewhere. Then you could also add yet another class called .push-column-3-4 for the right: 25% stuff… then that becomes re-usable…

CSS!!!

[shaneisme]

Bringing it all home:

http://codepen.io/drainpip/pen/vOqepg

[xebico]

Drat. Didn’t work and I can’t explain why. I’m guessing I’m not understanding your instructions well enough.

In the HTML file I have something similar to this:

<!-- SIDEBAR ----------------- -->
<div id="sidebar">
SIDEBAR STUFF
</div>

<!-- MAIN -------------------- -->
<div id="left">
MAIN BAR STUFF
</div>

My CURRENT stylesheet’s media queries (again, simplified for here):

@media all and (min-width: 800px) {
     body {width: 100%;}
     html {font-size: 15px;}
     #sidebar {width: 25% !important;}
     #left {width: 75% !important;}
}

@media all and (max-width: 799px) {
     body {width: 100%;}
     html {font-size: 14px; width:100%;}
     #left { width: 100%; }
     #sidebar {width: 100% !important;}
}

You’re suggesting I swap the sidebar and mainbar in my HTML and change the media queries to

@media all and (min-width: 800px) {
     body {width: 100%;}
     html {font-size: 15px;}
     #sidebar {width: 25% !important; right: 75%; left: auto; }
     #left {width: 75% !important; left: 25%; right: auto;}
}

@media all and (max-width: 799px) {
     body {width: 100%;}
     html {font-size: 14px; width:100%;}
     #left { width: 100%; }
     #sidebar {width: 100% !important;}
}

I’m sure I missed something there….

[xebico]

I saw your other notes after I posted that. I’ll need a bit to put it all together, but dagnabit, it oughta work! Thank you for your help — I’ll be back as soon as I can to tell you I figured it out. :)

[xebico]

It worked! Perfectly! Thank you!

I see your point about using more semantic names (and more-reusable styles), and that’s something I’ll do in the future. Right now I’m just happy to have this work the way I wanted it, and now I can tweak it a bit.

Again: Thank you, you saved me a TON of trouble!

[shaneisme]

NP – have fun out there :)

[Shikkediel]

Neat, I was just wondering @shaneisme if there’s a particular reason (I’m not seeing) to use auto on the opposite side?

codepen.io/anon/pen/gpNezQ

[shaneisme]

If this was the only thing you were doing, yeah you don’t need it.

If you’re making a grid system with pushes and pulls for different breakpoints, it’s a good practice so you know for sure what’s going to happen.

[xebico]

Speaking of which, you’ve convinced me to investigate pushes and pulls. :)
CSS is the gift that keeps on giving!

[Paulie_D]

You’re gonna love flexbox then….

[xebico]

Ooooooooh.

(But still no balanced, newspaper-style columns?)

[shaneisme]

And if you like flexbox, wait until you get a hold of CSS Grid… ;)

[Author]

Posts