弹性框的小困难

Question

所以还有一些东西在学习弹性框，我在项目中遇到了一些麻烦。 我只拿了弹性框的代码，以便于查看。

我有一个两个柔性容器，里面有两个div。 它成功地工作了，当我将屏幕缩小到足够小时，它们会一个接一个地对齐，而不是像你把屏幕变大时那样并排对齐。 在顶部移动，当您缩小屏幕时，位于底部。我想做的是让它在缩小屏幕时放在顶部并在底部。

.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

如果我答对了你的问题，这可能是你想要实现的目标。(按全尺寸查看差异(

.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>