Я создаю адаптивную веб-страницу с помощью flexbox, и мне не следует использовать какие-либо фреймворки. У меня проблемы с переносом элементов на разные устройства экрана. У меня есть нижний колонтитул с двумя элементами div, поле подписки должно быть обернуто ниже основного содержимого, и я не могу заставить его работать.
Что мне нужно для достижения sh, так это иметь фиолетовый эль с классом subscribe, чтобы обернуть его под элементом класса footer-info.
Вот кто это выглядит сейчас: 
Вот мой код
<footer class="footer">
<div class="col footer-info">
<div class="footer-content">
<p>Lorem Ipsum is simply dummy text of the printing and</p>
</div>
<div class="col subscribe">
<div class="subscribe-content">
<h3 class="footer-heading">Join our mailing list</h3>
<form>
<input type="text" id="email" name="email" placeholder="Your email address" required >
<button type="button" class="button">Subscribe</button>
</form>
</div>
</div>
</div>
</footer>
footer {
display: flex;
position: relative;
flex-wrap: wrap;
margin: 100px -40px 0; /*to offset the body margin and have full width*/
padding: 60px 80px 40px;
background-color:#D64C31;
color: white;
}
.subscribe {
width: 365px;
display: flex;
flex-wrap: wrap;
flex-direction: column;
position: absolute;
background-color: #4A455C;
padding: 80px 60px 20px;
top: -60px;
right: 60px;
bottom: 0;
}
.footer-info {
display: flex;
flex-direction: column;
width: 600px;
}
@media screen and (max-width: 1200px) {
.footer-content{
max-width: 360px;
}
.subscribe {
width: 100%;
top: auto;
right: 0;
left: 0;
}
}
@media screen and (max-width: 768px) {
.footer-content {
max-width: 640px;
}
}
Любая помощь будет оценена !