Responsive table with images content in bootstrap

I am working on a drupal site that has a table with the below structure:

table
.............
t1     i1
...........
t2     i2
...........

While I make the table responsive I want the structure to look as below:

table
.............
i1
....
t1
....
i2
....
t2
....

My code is not supporting this. The images are not getting aligned when screen size is reduced.

My HTML code looks as below:

<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="../../themes/bootstrap/starterkits/THEMENAME/css/style.css" rel="stylesheet" />
<link href="//fonts.googleapis.com/css?family=Raleway" rel="stylesheet" type="text/css" />
<link href="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js" rel="javascript" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js" rel="javascript" />
<div class="panel">
<div class="container">
<p class="paragraph"> test content</p>

<div class="table-responsive-xl">
<table>
    <tbody>
        <tr>
            <td style="width: 883px;">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
                t enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </p> 
            </td>
            <td style="width: 159px;">
                <img align="center" class="img-responsive" src="https://images.pexels.com/photos/417173/pexels-photo-417173.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" width="80%" />
            </td>
        </tr>
        <tr>
            <td style="width: 883px;"> 
                <p>The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book. </p> 
            </td>
            <td style="width: 159px;">
                <img align="center" class="img-responsive" src="https://www.nationalgeographic.com/content/dam/travel/rights-exempt/2018-travel-photographer-of-the-year/magical-mountains/mountain-range-appenzell-switzerland.ngsversion.1527192465569.adapt.1900.1.jpg" />
            </td>
        </tr>
    </tbody>
</table>
</div>
</div>
</div>

Any help on how this can be modeled?