Currently, I am looking to create an email template. Typically, I create my email templates with each content/row separated. However, this time I need to design an email template with a layout that consists of 2 columns on desktop and switches to 1 column on mobile. It's similar to applying the bootstrap grid like this:
<div class="col-12 col-md-6"></div>Below is a snippet of my CSS:
.col-md-6 {
display: flex;
flex-flow: column wrap;
flex-grow: 6;
flex: 0 0 50%;
-ms-flex: 0 0 50%;
max-width: 50%;
}
@media screen and (max-width: 767px) {
.col-12 {
display: flex;
flex-flow: column wrap;
flex-grow: 12;
flex: 0 0 100%;
-ms-flex: 0 0 100%;
max-width: 100%;
}
}
My goal is to have the email look like the following images once it has been successfully sent:
https://i.sstatic.net/LEfD7.png
https://i.sstatic.net/6iMqu.png
If anyone can help me solve this problem, it would be greatly appreciated.