Small difficulty with a flexbox

Question

So there is still some stuff Im working on learning about flexboxes and I having some trouble with one on a project. I took ou the code of just the flexbox to make it easier to look over.

I have a two flex container with two divs inside it. It is working successfully in the way that when I shrink the screen small enough they are aligned one on top of the other instead of side by side like when you make the screen bigger. is going on the top and is going on the bottom when you shrink the screen. What I am trying to do is make it so that goes on the top and goes on the bottom when you shrink the screen.

.twoflexcontainer { 
  overflow:hidden;
  width: 100%;
}

.twoflexcontainer div {
   padding: 10px;
}
#twoflexright {
  float:left; 
  width:55%;
}
#twoflexleft { 
  overflow:hidden;

}

@media screen and (max-width: 700px) {
   #twoflexright { 
    float: none;
    width:auto;

  }
  .twoflexcontainer { 
  flex-direction: row-reverse;
}
}

<div class="twoflexcontainer">
  <div id="twoflexright"><p>one</p></div>
  <div id="twoflexleft"><p>two</p></div>
</div>

Answer 1

If I got your question right, this is likely what you're trying to achieve. (Press full size to see the difference)

.twoflexcontainer {
	overflow: hidden;
	width: 100%;
	display: flex;
	flex-direction: row;
}

.twoflexcontainer div {
	padding: 10px;
	width: 50%;
}

@media screen and (max-width: 1000px) {
	.twoflexcontainer div {
		width: 100%;
	}

	.twoflexcontainer {
		flex-direction: column-reverse;
	}
}

<div class="twoflexcontainer">
    <div id="twoflexright"><p>one</p></div>
    <div id="twoflexleft"><p>two</p></div>
</div>