How to style 7.1 blog layout as Side by Side on mobile

In 7.1 you have the option of styling the blog as a grid (thumbnail image stacked on top of title) or side by side (thumbnail image on the left with text adjacent to it). However, when viewed on mobile the blog layout defaults too grid. There is currently no way of customising the mobile view from within the Style section. Attached is an image of the mobile view I'm trying to achieve. Summary blocks allow you to create this layout but I need this layout to apply to the entire blog.

Can anyone please help with the CSS so that the blog displays as grid on deskop but side by side (list view) on mobile?
 

Can you share link to blog ?

https://dragonfly-antelope-z7f8.squarespace.com  
Password: squarespace

Thanks for taking a look at this @tuanphan

7 hours ago, meganheath said:

https://dragonfly-antelope-z7f8.squarespace.com  
Password: squarespace

Thanks for taking a look at this @tuanphan

Do you know CSS basic?

Have you tried Float/Flex yet? Some suggestion..

@media screen and (max-width:640px) {
.blog-basic-grid .blog-basic-grid--container {
    flex-direction: row;
}
.blog-basic-grid .blog-basic-grid--text {
    margin-left: 10px;
}
article>div:first-child {
    width: 40%;
}
.blog-basic-grid .blog-article-spacer {
    display: none;
}
h1.blog-title {
    font-size: 16px !important;
    text-align: left;
}
}

That worked! Thank you so much for your help.