Creating advanced layout - Flexbox or Table - html

Question

I was trying to take an exercise and create an advanced layout as shown below.
After I came up with two solutions I started to wonder what is the best solution for creating such a layout.
Would you use flex display or table display? Would you consider using bootstrap or not? What should I consider when choosing one over the other in this case? Also taking in consideration devices with smaller resolution, for example 800px or less.
Here are my implementations:
Flex implementation:
<div class="container p-0">
<div class="d-flex flex-row bd-highlight">
<div class="flex-grow-1 bd-highlight">
<div class="mt-3 ml-3">
#C0000028524
</div>
</div>
<div class="flex-grow-10 bd-highlight d-flex long-title-container">
<div class="mt-3 long-title">
<p class="long-title mb-0 fs-5">
Context menu shows wrong language
</p>
</div>
</div>
<div class="flex-grow-1 bd-highlight text-secondary">last updated</div>
</div>
<div class="d-flex flex-row bd-highlight">
<div class="flex-grow-1 bd-highlight mlm-1">
<img src="open.png" />
</div>
<div class="flex-grow-10 bd-highlight d-flex long-title-container"><p class="long-title">Context menu shows wrong language</p></div>
<div class="flex-grow-1 bd-highlight text-secondary">last updated</div>
</div>
</div>
Link to the flex implementation: https://jsfiddle.net/7d512swt/
And here is my table implementation:
<div class="table-responsive">
<table class="table">
<tbody>
<tr>
<th scope="row">
<div class="mt-3 ml-3">
#C0000028524
</div>
</th>
<td>
<p class="long-title mb-0 fs-5">
Context menu shows wrong language
</p>
</td>
<td>last updated</td>
</tr>
<tr>
<th scope="row">2</th>
<td><img src="open.png" /></td>
<td><p class="long-title">Context menu shows wrong language</p></td>
<td>last updated</td>
</tr>
</tbody>
</table>
</div>
Link to the table implementation:
https://jsfiddle.net/auv08hdq/