Threading among elements in css like in publishing software - css

Question

Is there any way to create a layout like this by plain css maybe via flex-box, css-grid or anything except JS:
+--------------------------+ +---------------+
| | | sidebar |
| | | container |
| | | with border |
| | | +-----------+ |
| | | |sidebar | |
| | | |card #1 | |
| | | | | |
| | | | | |
| main content | | +-----------+ |
| of various | | +-----------+ |
| height | | |sidebar | |
| | | |card #2 | |
| | | | | |
| | | | | |
| | | +-----------+ |
| | | +-----------+ |
| | | |sidebar | |
| | | |card #3 | |
| | | | | |
| | | | | |
| | | +-----------+ |
| | +---------------+
| | not enough space
| | for one more card
+--------------------------+
+--------------------------------------------+
| "sidebar" continues here, with border and |
| this header |
| +-----------+ +-----------++-----------+ |
| |sidebar | |sidebar ||sidebar | |
| |card #4 | |card #5 ||card #6 | |
| | | | || | |
| | | | || | |
| +-----------+ +-----------++-----------+ |
| +-----------+ +-----------+ |
| |sidebar | |sidebar | |
| |card #7 | |card #n | |
| | | | | |
| | | | | |
| +-----------+ +-----------+ |
| |
+--------------------------------------------+
So cards warping around the main content first from right side, and then from bottom, if main content have various height, whole difficulty that right "real" sidebar, should contain a maximum number of cards, but its height should be less than content container.

Answer 1

I tried making your layout in a simple way, using limited and vanilla CSS. The grid is responsive and I tried to make the names somewhat follow the Bootstrap guidelines.
.col {
position: relative;
float: left;
color: white;
}
.col-9 {
width: 75%;
}
.main {
min-height: 200px;
background-color: red;
}
.col-12 {
width: 100%;
background-color: red;
}
.sidebar .col-12 {
width: 100%;
background-color: green;
}
.col-3 {
width: 25%;
background-color: green;
}
.col-4 {
width: 33%;
background-color: blue;
}
<div class="main col col-9">
<div class="col-12">main</div>
</div>
<div class="sidebar col col-3">
<div class="col col-12">sidebar</div>
<div class="col col-12">sidebar</div>
<div class="col col-12">sidebar</div>
</div>
<div class="col col-4">sidebar</div>
<div class="col col-4">sidebar</div>
<div class="col col-4">sidebar</div>
<div class="col col-4">sidebar</div>
<div class="col col-4">sidebar</div>
Working fiddle example