Email layout flex - html

Question

I'm currently making an email layout with tables, and what I need is being able to put picture above the text in some particular screen sizes
Here's the example of my code:
<table width="100%" cellpadding="0" cellspacing="0" style="border-spacing:0; padding: 50px 20px 10px;">
<tr>
<td valign="center" style="text-align:left;">
<h1 style="margin-top: -30px; margin-left: 10px; font-family: 'Trebuchet MS', sans-serif; font-size: 16px; color: #404040; line-height: 1.4; font-weight: 700">my text</h1>
<h1 style="margin-top: -10px; margin-bottom: 30px; margin-left: 10px; font-family: 'Trebuchet MS', sans-serif; font-size: 16px; color: #404040; line-height: 1.4; font-weight: 400">my text</h1>
</td>
<td valign="center" style="text-align:left;">
<img style="margin-right: 10px; margin-top: -50px;" src="https://via.placeholder.com/300.jpg" alt="">
</td>
</tr>
</table>
So the issue is the picture has to be on one line with the text when looking at it from a computer screen and go above/below the text when checking it from mobile mailing client

Answer 1

My favourite technique is to use table header cells () and display block them on mobile. The same can be done in most email clients with but there are a few mobile email clients which don't allow it and so your layout won't stack as expected.
Just a couple of notes on your code:
I noticed the use of valign="centre" on the two cells. For valign, the correct value is middle. Centre is used for the align attribute. So just switch those around.
You've used a lot of negative margin in your code. While it isn't the end of the world, I would imagine a fair amount of issues in testing. I would correct the valign value first, then play with padding on the table cells to try and get the layout you're looking for. Also play with line height if you're seeing issues. Negative margin values could cause more harm than good further down the line.
I've coded a couple of examples for you, incorporating my notes above:
Current - your code as posted
Stacked table header cells - basic stacking cells example
Reverse stacked table header cells - point 2 but reversed, as you requested
Codepen - https://codepen.io/Digital_Frankenstein/pen/WNObXzb
Code:
#media only screen and (max-width:460px) {
.device-width { width:100%!important; padding:0; min-width:100%!important; }
.device-width-padding { width:85%!important; padding:0; min-width:85%!important; }
.th-block { display:block; width:100%!important; }
.th-block-reverse-header { display:table-header-group; width:100%!important; }
.th-block-reverse-footer { display:table-footer-group; width:100%!important; }
}
<table border="0" cellpadding="0" cellspacing="0" style="width:100%;" role="presentation">
<tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0" class="device-width-padding" style="border:1px solid red;" role="presentation">
<tr>
<td style="font-weight:600; color:red; font-size:20px; padding:10px 0 5px 0; text-align:left;">
Current
</td>
</tr>
<tr>
<td align="center" style="padding: 50px 20px 10px;">
<table width="100%" cellpadding="0" cellspacing="0" style="border-spacing:0;">
<tr>
<td valign="center" style="text-align:left;">
<h1 style="margin-top: -30px; margin-left: 10px; font-family: 'Trebuchet MS', sans-serif; font-size: 16px; color: #404040; line-height: 1.4; font-weight: 700">my text</h1>
<h1 style="margin-top: -10px; margin-bottom: 30px; margin-left: 10px; font-family: 'Trebuchet MS', sans-serif; font-size: 16px; color: #404040; line-height: 1.4; font-weight: 400">my text</h1>
</td>
<td valign="center" style="text-align:left;">
<img style="margin-right: 10px; margin-top: -50px;" src="https://via.placeholder.com/300.jpg" alt="">
</td>
</tr>
</table>
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" class="device-width-padding" style="border:1px solid green;" role="presentation">
<tr>
<td style="font-weight:600; color:green; font-size:20px; padding:10px 0 5px 0; text-align:left;">
Stacked table header cells
</td>
</tr>
<tr>
<td align="center" style="padding: 50px 20px 10px;">
<table width="100%" cellpadding="0" cellspacing="0" style="border-spacing:0;">
<tr>
<th class="th-block" valign="middle" style="text-align:left;">
<h1 style="margin-top:0; margin-left: 10px; font-family: 'Trebuchet MS', sans-serif; font-size: 16px; color: #404040; line-height: 1.4; font-weight: 700">my text</h1>
<h1 style="margin-top:0; margin-bottom: 30px; margin-left: 10px; font-family: 'Trebuchet MS', sans-serif; font-size: 16px; color: #404040; line-height: 1.4; font-weight: 400">my text</h1>
</th>
<th class="th-block" valign="middle" style="text-align:left;">
<img style="margin-right: 10px;" src="https://via.placeholder.com/300.jpg" alt="">
</th>
</tr>
</table>
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" class="device-width-padding" style="border:1px solid blue;" role="presentation">
<tr>
<td style="font-weight:600; color:blue; font-size:20px; padding:10px 0 5px 0; text-align:left;">
Reverse stacked table header cells
</td>
</tr>
<tr>
<td align="center" style="padding: 50px 20px 10px;">
<table width="100%" cellpadding="0" cellspacing="0" style="border-spacing:0;">
<tr>
<th class="th-block-reverse-footer" valign="middle" style="text-align:left;">
<h1 style="margin-top:0; margin-left: 10px; font-family: 'Trebuchet MS', sans-serif; font-size: 16px; color: #404040; line-height: 1.4; font-weight: 700">my text</h1>
<h1 style="margin-top:0; margin-bottom: 30px; margin-left: 10px; font-family: 'Trebuchet MS', sans-serif; font-size: 16px; color: #404040; line-height: 1.4; font-weight: 400">my text</h1>
</th>
<th class="th-block-reverse-header" valign="middle" style="text-align:left;">
<img style="margin-right: 10px; margin-top:0;" src="https://via.placeholder.com/300.jpg" alt="">
</th>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>