css position two divs diffrently depending on screen size - css

Question

I have project where I need to display two div's. Both div's have the same width and this width is a set width. So their width doesn't scale with the screen size.
The problem I am facing is that when they are large enough to fit next to each other they need to be positioned with space in between. Both outer sides of the the div's need to touch the sides of the screen.
But when the window scales down so that they are to big to fit next to each other. Then they need to be positioned in the center of the screen underneath each other.
I have tried with flexbox, flex-wrap and justify content: space between. But when the window scales down they are both positioned at the left side of the screen and not in the center.
Here is how the should look when the screen is large enough:
And when the screen is so small that they don't fit next to each other:

Answer 1

Using CSS-Grids, this problem is done much cleanly:
Media query is set so perfectly. No margins needed. We just need to use min-width equal to the sum of widths of our two divs.
.wrap {
width: 100vw;
height: 100vh;
display: grid;
grid-template-columns: 1fr;
background: green;
}
.wrap div {
height: 200px;
width: 200px;
background: black;
justify-self: center;
}
#media (min-width: 400px) {
/* min-width is calculated by width of two divs 2*200*/
.wrap {
grid-template-columns: 1fr 1fr;
}
.wrap div:first-child {
justify-self: start;
}
.wrap div:last-child {
justify-self: end;
}
}
<div class="wrap">
<div></div>
<div></div>
</div>

Answer 2

It's not very clear what you're trying to achive. Maybe you can do something like this:
<div class="wrap">
<div></div>
<div></div>
</div>
and
.wrap{
width: 100vw;
/* higher than 2 x box height */
height: 100vh;
display:flex;
justify-content:space-between;
background: green;
}
.wrap div{
height: 200px;
width: 200px;
background: black;
}
#media (max-width: 450px ){
/* 450px = 2 * box-size + min-gap-width(50) */
.wrap{
align-items:center;
flex-direction: column;
}
.wrap div{
margin: 50px;
}
}
codepen-demo