Help! Mobile Responsive image and text custom liquid

[TritonJK]

Hello! 

I am wanting to add a custom liquid section to my theme that uses an image file in my assets folder as the static image. I want the image to be max 538x538 and 100% width on mobile.

I have the h1 and paragraph section how I want it on desktop, but I cannot figure out how to get the text to move to below the image on mobile view.

<div style="display: flex; flex-wrap: wrap; justify-content: center; padding: 0 20px;">
<div style="flex: 1; margin-bottom: 10px; max-width: 538px; margin-right: 20px;">
<img src="{{ 'productimage1.jpeg' | asset_url }}" alt="Product Image" style="max-width: 100%; height: auto;">
</div>
<div style="flex: 1; max-width: 538px;">
<h1 style="text-align: center;">Product Title</h1>
<p style="text-align: center; max-width: 538px; margin: 0 auto;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>

<style>
@media only screen and (max-width: 768px) {
div {
width: 90%;
margin: 0 auto;
box-sizing: border-box;
}
h1, p {
text-align: center;
}
img {
width: 100%;
}
}
</style>

[erik_lindberg_s]

Hi TritonJK

If you add 

flex-direction: column;

to your parent div your elements will stack.