html - 更改 flexbox 布局以显示 block 格式

Question

我有一个部分正在通过 flexbox 显示。这很好用，但是当视口(viewport)达到 640px 或更小时，我希望能够使所有三个部分以宽度为 100% 的 display: block 方式显示。我尝试将 #contact-section 更改为 display: block，但它完全不符合我在 flex 中使用的格式。

我希望它在 640px 下看起来像这样。

有谁知道我该怎么做而不丢失 flex 格式，或者至少让它在这个视口(viewport)中工作？

Here is a fiddle which will allow the sections to be seen in a 640 or less viewport.

#contact-section {
	display: flex;
	justify-content: space-around;
	align-items: center;
	color: #FFF;
	background: #00a16d;
	padding: 1em;
}
#contact-section:before {
	content: "";
	flex: 0 0 1px;
	height: 3em;
	background: #FFF;
	order: 2;
}
#contact-section-left {
	font-size: 1.5em;
	order: 1;
	font-style: italic;
}
#contact-section-right {
	background: url("../icons/envelope.png") center / contain no-repeat;
	font-size: 2em;
	order: 3;
	padding: 1em 0;
}
#contact-section-right a {
	color: #FFF;
	text-decoration: none;
}
/*--------------------------MEDIA QUERY 640------------------------------------*/

@media screen and (max-width:640px) {

#contact-section {
	display: flex;
	justify-content: space-around;
	align-items: center;
	padding: 1em 2em;
}
#contact-section:before {
	flex: 0 0 1px;
	height: 3em;
	order: 2;
  display: block;
  width: 100%;
}
#contact-section-left {
	font-size: 1.5em;
	order: 1;
  display: block;
  width: 100%;
}
#contact-section-right {
	font-size: 2em;
	order: 3;
	padding: 1em 0;
  display: block;
  width: 100%;
}
	
}

<div id="contact-section">
		<div id="contact-section-left">Tell us more about your digital marketing project.</div>
		<div id="contact-section-right"><a href="../discuss-project">Contact us</a></div>
	</div>

Answer 1

我把方向改成专栏了，看来现在可以了

#contact-section {
  display: flex;
  justify-content: space-around;
  align-items: center;
  color: #FFF;
  background: #00a16d;
  padding: 1em;
}
#contact-section:before {
  content: "";
  flex: 0 0 1px;
  height: 3em;
  background: #FFF;
  order: 2;
}
#contact-section-left {
  font-size: 1.5em;
  order: 1;
  font-style: italic;
}
#contact-section-right {
  background: url("../icons/envelope.png") center / contain no-repeat;
  font-size: 2em;
  order: 3;
  padding: 1em 0;
}
#contact-section-right a {
  color: #FFF;
  text-decoration: none;
}
/*--------------------------MEDIA QUERY 640------------------------------------*/

@media screen and (max-width: 640px) {
  #contact-section {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    padding: 1em 2em;
  }
  #contact-section:before {
    flex: 0 0 10px;
    order: 2;
    display: block;
    width: 100%;
    background-color: red;
  }
  #contact-section-left {
    font-size: 1.5em;
    order: 1;
    display: block;
    width: 100%;
  }
  #contact-section-right {
    font-size: 2em;
    order: 3;
    padding: 1em 0;
    display: block;
    width: 100%;
    text-align: center;
  }
}

<div id="contact-section">
  <div id="contact-section-left">Tell us more about your digital marketing project.</div>
  <div id="contact-section-right"><a href="../discuss-project">Contact us</a>
  </div>
</div>