Altering a flexbox layout to display block format - html

Question

I have a section in which is displaying via a flex box. This works great, but when the viewport gets to a 640px or less size, I want to be able to make all three section be shown in a display: block fashion with a width of 100%. I tried changing the #contact-section to display: block, but it went completely out of the format I have with flex.
I am wanting it to appear like this under 640px's.
Does anyone know how I can do it without losing the flex format, or at least making it work in this 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">Contact us</div>
</div>

Answer 1

I have changed the direction to column, seems that now it works
#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">Contact us
</div>
</div>

Answer 2

You could use min-width instead mediaqueries and flex-wrap:wrap and eventually border(s) on the first element to drop the pseudo ::before. See Fiddle test 1 & Fiddle test 2 .
#contact-section {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
color: #FFF;
background: #00a16d;
}
#contact-section:before {} #contact-section-left {
font-size: 1.5em;
font-style: italic;
min-width: 320px;
border-top: 1em solid transparent;
border-bottom: 1em solid transparent;
border-right: 1px solid white;
padding: 1em;
flex: 1;
}
#contact-section-right {
background: url("../icons/envelope.png") center / contain no-repeat;
font-size: 2em;
padding: 1em;
flex: 1;
min-width: 320px;
}
#contact-section-right a {
color: #FFF;
text-decoration: none;
}
<div id="contact-section">
<div id="contact-section-left">Tell us more about your digital marketing project.</div>
<div id="contact-section-right">Contact us
</div>
</div>
edit
if you still want to use a pseudo of 3em height, then you can draw it from the first box https://jsfiddle.net/mq41hgkp/3/