Самый простой способ сделать это - Flexbox . Я создал образец Codepen для вас здесь: https://codepen.io/CWSites/pen/pqGowo
Сам код может быть любым, как вам нравится, для простоты я только что сделал несколько дел.
<div class="container">
<div class="sidebar">
Sidebar Here
</div>
<div class="content">
Hello World
</div>
</div>
CSS - это место, где происходит волшебство. Для использования flexbox вам понадобится содержащий div с некоторыми стилями flex. Ваша боковая панель и ваши контент-дивы также будут нуждаться в собственном коде flexbox. В моем примере у меня установлен медиа-запрос для экранов 600px и меньше, но вы можете настроить его так, как вам нравится.
Начиная с первого шага, вы захотите, чтобы ваш порядок на боковой панели был равен 1, чтобы он отображался сначала слева направо, однако на меньшем экране я переворачиваю порядок flexbox, чтобы на боковой панели теперь было 2, а содержимое - 1.
.container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.sidebar {
width: 30%;
order: 1;
}
.content {
width: 70%;
order: 2;
}
@media only screen and (max-width: 600px) {
.container {
flex-direction: column;
}
.sidebar {
order: 2;
}
.content {
order: 1;
}
}
При работе с Flexbox я нахожу это руководство чрезвычайно полезным.