Ответ 1
Я уверен, что у вас это есть, но вот пример для других, которые проходят мимо. Как и предыдущий человек, люди должны тратить время на это: http://www.w3.org/TR/css3-mediaqueries/
Теперь, вот ответ. Вы можете поместить "пейзаж" или "портрет" в сочетании с шириной и высотой в правилах @media. Это предполагает, что высота больше ширины и наоборот. Обычно я использую только min-width, а затем имею несколько отдельных правил @media для них. Одним из примеров может быть пейзаж: горизонтальная прокрутка (рабочий стол) и портрет: регулярная вертикальная (планшет/телефон)
Те 2 не будут делать это в одиночку, вам понадобятся некоторые комбинации. Я думаю, мы можем предположить, что ваша боковая панель будет препятствием для экранов размером менее 600 пикселей.
/* 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
}
}
ЗДЕСЬ jsfiddle - обратите внимание, что размер окна: border-box; используется для устранения неполадок.
2017 ОБНОВЛЕНИЕ
Я думаю, что большинство людей будут использовать flexbox сейчас: 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..." */
}
}