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:

CSS

.left { 
  width:auto;
  overflow:hidden;
  float:none;
}
.right {
  width:500px;
  float: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)

css

#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..

    Learn how to arrange elements correctly using CSS [closed]

    How to create background css div/rounded corners?

    How to achieve “responsiveness” of this template?

    How do I style a different border?

    How to do navbar fixed?

    How to create triple div border in CSS

    How Do I Make My CSS Slider Auto Play? [closed]

    How do I remove a specific bullet point within a ul in CSS?

    How to vertically align div text?

    How to move menu to the right of the logo and to clean up unused space?

    How to make 3 vertical dots using CSS?

    CSS how to style a parent item when a textarea is in focus?

    How should I re-create this design in HTML and CSS?

    How to arrange three flex div side by side

    How to create transparent background color in html & css [duplicate]

    How to hide submenu when user clicks option, but still display when user hovers over menu

    How to make a dynamic html form using css and js

    How Should I Send HTML/CSS Content To A Server?

    How to distinct classes in CSS using Javascript

    element doesn't show padding in Opera, Safari, IE

    How to implement this logic in CSS?

    How do I avoid gap when using z-index in CSS?

    Ambiguous match, found 2 elements matching css, how to get to the second one?

    How to avoid display block for a particular div element using css

    Showcase the first n-items in a bootstrap grid

    How to change the highlight color of textbox using focus selector in css

    How to set overlay on a page according to page height using CSS

    How to target tablet devices with CSS queries

    How to achive certain overlapping layout when there is not enough space in parent container?

    How to make
  • expand with CSS (like Apple.com)