I'm sure you have it by now, but here is an example for others who pass by. Like the previous person said, people should take the time to read this: http://www.w3.org/TR/css3-mediaqueries/
Now, here is an answer. You can put "landscape" or "portrait" in conjunction with widths and heights in your @media rules. This assumes that height is greater than the width and vice versa. I usually only use min-width and then have a few separate @media rules for those specifically. One example would be landscape: horizontal scroll (desktop) and portrait: regular vertical (tablet/phone )
Those 2 wouldn't do it alone though, you'll need some combinations. I think we can assume your sidebar would be a hindrance on screens smaller than 600px wide.
/* 01 */
@media (min-width: 0) {
/* this is the same as not using a media query... */
.main-content {
width: 100%;
float: left;
}
.side-bar {
width: 100%;
float: left
}
}
/* 2 */
@media (min-width: 600px) and (orientation:landscape) {
.main-content {
width: 70%;
float: left;
}
.side-bar {
width: 30%;
float: left
}
}
HERE is a jsfiddle - note that box-sizing: border-box; is used for padding issues.
2017 UPDATE
I think most people would use flexbox now: https://jsfiddle.net/sheriffderek/egxcgyyd/
.parent {
display: flex;
flex-direction: column;
}
@media (min-width: 600px) and (orientation:landscape) {
.parent {
flex-direction: row;
}
.child-1 {
min-width: 260px; /* or flex-basis: xx - try them both */
}
.child-2 {
flex-basis: 100%; /* "if at all possible... please try to be this size..." */
}
}