CSS Media Queries: How to make the right column display above the left on small screens?

Tags: css,css3,media-queries

Problem :

When resizing a window, how can I make the right column go above the left column? The default behavior is that the right column slides beneath the left.

Here's a diagram illustrating my goal:

wider window:


| left column | right column |


and here's the CSS used to generate that layout:


.left { 
.right {

Here's what I want to display on a narrower window, like a mobile device:


| right column |

| left column |


I know media queries are the key, but I don't know the code to use. Any advice?

Solution :

One way to go about this would be using media queries and absolute positioning. View it on JSFiddle.

Media queries, if you're unfamiliar, basically say 'apply this CSS in this particular situation.' And the absolute positioning lets us move the divs wherever we want.

In the below code, we slide our divs around when our view shrinks below 700px wide. To make the Fiddle display this, either shrink your browser window our shrink the 'Result' panel until you see the transition. (On my computer it's significantly less laggy to slide the Result panel)


#left {
  background: #eee;
  height: 60px;
  width: 200px;
  position: absolute;
  top: 0;
  left: 0;
#right {
  background: #ddd;
  height: 60px;
  width: 200px;
  position: absolute;
  top: 0;
  left: 200px;

@media screen and (max-width: 700px) {
  #left {
    background: #2f6497;
    top: 60px;
  #right {
    background: #002d62;
    left: 0;

    CSS Howto..

    Bold text not showing on iPhone but displays fine on Android

    How to remove all the borders of a selectbox?

    How can I translate with webkit-transform enough so that

    How do I get Aptana Plugin for Eclipse to validate against CSS3, rather than CSS2?

    Jquery Mobile — how to Override Height and width of select box.

    jquery width toggle animation is showing vertical cells during animation takes place

    How to call css styles in specific page in HTML?

    Linkedin Follow Button not showing properly in Firefox

    How to create a underline with small break in middle with css?

    How can I separate areas with floats from each other?

    How do I strip a line of text or amount of words/characters from stored text with CSS/Javascript?

    How to append text after last css class

    CSS - How to align image left bottom to the text block?

    How to make all elements in one line?

    Foundation 6: how to handle images that has an vertical overflow within one row?

    How to move the blue twitter bird slowly using css and js?

    How to apply a class in the current slide using bxslider?

    How to change or call svg clippath polygon attributes in CSS

    How to target all elements, except last one with css?

    How to modify CSS to achieve three lines?

    CSS - How to Draw a Multi-Coloured Line?

    How do I move this scrolling bar closer to the post area?

    How to reference this line in CSS, HTML

    Css - How to override css for a table cell

    My CSS looks perfect on desktop, but leaves a 2-5 pixel line to the right on mobile, how do I find the issue?

    How do I add transition to the effect of hide() and show() on these elements?

    How to debug HTML/CSS for iPhone/iPad performance?

    How to trim off Image in CSS?

    How to retrieve the real height of a #div (including overflowed parts)

    How does jQuery .fadeTo() work?