Responsive Depending Not On Screen Width But On Parent Div Width?

I would like the blocks below to pile on top of each other when the parent div is too small to display them on the same line. I have tried using a @media rule with max-width but it

Solution 1:

Do it differently using flexbox

.menuTwoColumns {
  display: flex;
  flex-wrap:wrap;
}

.menuTwoColumns > div {
  flex:calc(479px / 2);
  display:flex;
  align-items:center;
}

<divstyle="background-color:grey;  width: 500px;  resize: horizontal;  overflow: auto;"><divclass="menuTwoColumns"><div><p>You can resize</p></div><div><p>the parent div with your mouse the parent div with your mouse and more text and more text and more text and more text and more text and more text and more text and more text and more text and more text and more text and more text and more text</p></div></div></div>