How to move arbitrary elements into sidebar responsively using CSS - css

Question

I have a layout where there are N block elements.
These elements stack vertically (as is expected for block elements), this is what I desire for small-screens... however, on larger screens I want to move some of the elements to a sidebar (using CSS only). I'm thinking maybe this is possible with display grid? or some other mix of CSS techniques?
Here is a snippet.. the styling is just to give some color to the divs and show how I'd like it to look.
.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>
So, the first chunk of HTML (above) is what the HTML structure is.. but on screens larger than 800px I want it to look like the second chunk of HTML (above) having the content/sidebar layout.
I could create a bunch of grid-areas and specifically place each div in its desired grid area(s). However, I'm hoping for some way where I don't have to specify locations for each div manually - rather, divs could be added (dynamically) and they will show in the content or sidebar automatically simply by adding the appropriate class attribute.

Answer 1

You can set the elements to go to the first or second column.
flow dense is needed to avoid leaving holes:
.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>