如何使用CSS响应地将任意元素移动到侧边栏

Question

我有一个布局，其中有N块元素。这些元素垂直堆叠(正如块元素所期望的那样)，这就是我对小屏幕的期望……然而，在较大的屏幕上，我想将一些元素移动到侧边栏(仅使用CSS)。我在想也许这是可能的显示网格?或者其他CSS技术的组合?

这是一个片段。样式只是给div一些颜色，并显示我想要它的样子。

.want-to-look-like,
.container {
border: 1px solid gray;
padding: 1em;
}
.content div,
.container div {
background-color: #fee;
}
.sidebar div.can-sidebar,
.container div.can-sidebar {
background-color: yellow;
}
.want-to-look-like {
display: flex;
}
.sidebar {
flex-basis: 20%;
}
.content {
flex-grow: 1;
}

<div class='container'>
<div>...</div>
<div class='can-sidebar'>...</div>
<div>...</div>
<div class='can-sidebar'>...</div>
<div>...</div>
<div>...</div>
<div>...</div>
<div class='can-sidebar'>...</div>
<div>...</div>
</div>
I want the above HTML structure to be styled so it looks like this (on screens wider than 800px, otherwise it would just stay as-is):
<div class='want-to-look-like'>
<div class='content'>
<div>...</div>
<div>...</div>
<div>...</div>
<div>...</div>
<div>...</div>
<div>...</div>
</div>
<div class='sidebar'>
<div class='can-sidebar'>...</div>
<div class='can-sidebar'>...</div>
<div class='can-sidebar'>...</div>
</div>
</div>

所以，HTML的第一个块(上面)是HTML的结构是什么…但是在大于800px的屏幕上，我希望它看起来像上面的第二个HTML块，具有内容/侧边栏布局。

可以创建一堆网格区域，并将每个div具体放置在所需的网格区域中。然而，我希望有某种方式，我不需要为每个div手动指定位置-相反，div可以(动态地)添加，它们将自动显示在内容或边栏中，只需添加适当的类属性。

Answer 1

可以将元素设置到第一列或第二列。需要密集流动以避免留下孔洞:

.container {
display: grid;
grid-template-columns: 150px 80px;
grid-gap: 5px;
grid-auto-flow: dense;

}
.container div {
background-color: lightblue;
border: black 1px solid;
grid-column: 1;
}
.container div.can-sidebar {
background-color: yellow;
grid-column: 2;
}

<div class='container'>
<div>...</div>
<div class='can-sidebar'>...</div>
<div>...</div>
<div class='can-sidebar'>...</div>
<div>...</div>
<div>...</div>
<div>...</div>
<div class='can-sidebar'>...</div>
<div>...</div>
</div>