Issue making my email table columns responsive fluid - php

Question

I have a table with two columns, left column holds an image and right one some text, I want to make this table responsive so when on mobile both columns hold all the horizontal space and the right column goes below the first column, making it somewhat fluid.
This is my template:
#if(count($mailData['order']['discountcodes']) > 0)
#foreach($mailData['order']['discountcodes'] as $code)
---
<br>
# {{ $code->discount->title }} (-{{ $code->discount->discountPercent }}%)
<table style="width:100%; table-layout:fixed;" >
<tr>
<td class="left_column"><img src="{{ $code->discount->image }}" style="min-width:150px; max-width:150px; min-height:100px; max-height:100px; border:1px solid rgb(150,150,150);"></td>
<td class="right_column"><p>Precio:{{ $code->discount->finalPrice }}</p><strong><p>CÓDIGO: {{ $code->unicode }}</p></strong></td>
</tr>
</table>
<br>
---
#endforeach
#endif
# Total:{{ $mailData['order']['cartTotalPrice'] }}
<br>
<br>
Disruta Tu Compañia,
<br>
{{ env('APP_NAME') }}
#endcomponent
<style>
.left_column{text-align:left; display:inline-block; width:150px;}
.right_column{text-align:left; display:inline-block; vertical-align:top; padding:0px 0px 0px 20px;}
#media only screen and (max-width: 480px)
{
.left_column{width:100% !important; display:block !important;}
.right_column{width:100% !important; display:block !important;}
}
</style>

Answer 1

Normally you can't really do that.
But now with Flexbox you can !
Except that I see your tag "email" and if this is going into an HTML email it will not work.
In fact, to have that working, you should use Flexbox on your <tr> tag
<style>
tr {
display: flex;
width: 100%;
flex-direction: column;
}
td {
width: 100%; // Force 100% width of the table
}
</style>
NB: This can gives unexpected result in complex tables
NB: As I said, this won't work in HTML emails because of email softwares/apps restrictions (no video, no JS, no CSS3, etc)
#media(max-width: 600px) {
tr {
display: flex;
width: 100%;
flex-direction: column;
}
td {
width: 100%;
}
}
<table class="table" width="100%">
<tbody>
<tr>
<th width="169">Some title here</th>
<td width="108">0,55 %</td>
<td width="117">0,41 %</td>
<td width="96">0,46 %</td>
<td width="65">0,40 %</td>
<td width="79">0,51%</td>
</tr>
</tbody>
</table>