I found this code free template that I am trying to modify into what I need.

I am struggling with stacking the one of the two '2 columns' in a reverse direction. I found the piece of code to do this, which is also to be found in the code snip below, but I have big trouble with implementing this. Can someone please help me?

I would like the same order for first text and then the picture of the dog, when the media filter is active (phone size)

Thank you!

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--[if !mso]><!-->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!--<![endif]-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title></title>
<link rel="stylesheet" type="text/css" href="styles.css" />
<!--[if (gte mso 9)|(IE)]>
<style type="text/css">
table {border-collapse: collapse;}
</style>
<![endif]-->

<style>
/* Basics */
body {
margin: 0 !important;
padding: 0;
background-color: #ffffff;
}

table {
border-spacing: 0;
font-family: sans-serif;
color: #333333;
}

td {
padding: 0;
}

img {
border: 0;
}

div[style*="margin: 16px 0"] {
margin: 0 !important;
}

.wrapper {
width: 100%;
table-layout: fixed;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}

.webkit {
max-width: 600px;
margin: 0 auto;
}

.outer {
Margin: 0 auto;
width: 100%;
max-width: 600px;
}

.inner {
padding: 0px;
}

.contents {
width: 100%;
}

p {
Margin: 0;
}

a {
color: #ee6a56;
text-decoration: underline;
}

.h1 {
font-size: 21px;
font-weight: bold;
Margin-bottom: 18px;
}

.h2 {
font-size: 18px;
font-weight: bold;
Margin-bottom: 12px;
}

.full-width-image img {
width: 100%;
max-width: 600px;
height: auto;
}

/* One column layout */
.one-column .contents {
text-align: left;
}

.one-column p {
font-size: 14px;
Margin-bottom: 10px;
}

/*Two column layout*/
.two-column {
text-align: center;
font-size: 0;
padding-bottom: 40px;
}

.two-column .column {
width: 100%;
max-width: 300px;
display: inline-block;
vertical-align: top;
}

.two-column .contents {
font-size: 14px;
text-align: left;
}

.two-column img {
width: 100%;
max-width: 300px;
height: 300px;
}

.two-column .text {
padding-top: 10px;
}

/*Three column layout*/
.three-column {
text-align: center;
font-size: 0;
padding-top: 10px;
padding-bottom: 10px;
}

.three-column .column {
width: 100%;
max-width: 200px;
display: inline-block;
vertical-align: top;
}

.three-column img {
width: 100%;
max-width: 180px;
height: auto;
}

.three-column .contents {
font-size: 14px;
text-align: center;
}

.three-column .text {
padding-top: 10px;
}

/* Left sidebar layout */
.left-sidebar {
text-align: center;
font-size: 0;
}

.left-sidebar .column {
width: 100%;
display: inline-block;
vertical-align: middle;
}

.left-sidebar .left {
max-width: 100px;
}

.left-sidebar .right {
max-width: 500px;
}

.left-sidebar .img {
width: 100%;
max-width: 80px;
height: auto;
}

.left-sidebar .contents {
font-size: 14px;
text-align: center;
}

.left-sidebar a {
color: #85ab70;
}

/* Right sidebar layout */
.right-sidebar {
text-align: center;
font-size: 0;
}

.right-sidebar .column {
width: 100%;
display: inline-block;
vertical-align: middle;
}

.right-sidebar .left {
max-width: 100px;
}

.right-sidebar .right {
max-width: 500px;
}

.right-sidebar .img {
width: 100%;
max-width: 80px;
height: auto;
}

.right-sidebar .contents {
font-size: 14px;
text-align: center;
}

.right-sidebar a {
color: #70bbd9;
}

/*Media Queries*/
@media screen and (max-width: 550px) {

.two-column .column,
.three-column .column {
max-width: 100% !important;
}

.two-column img {
max-width: 100% !important;
height: auto;
}

.three-column img {
max-width: 50% !important;
}

.rightonleft {

display: block;

width: 100%;

}
}

@media screen and (min-width: 550px) and (max-width: 620px) {
.three-column .column {
max-width: 33% !important;
}

.two-column .column {
max-width: 50% !important;
}

}
</style>

</head>

<body>
<center class="wrapper">
<div class="webkit">
<!--[if (gte mso 9)|(IE)]>
<table width="600" align="center">
<tr>
<td>
<![endif]-->
<table class="outer" align="center">
<tr>
<td class="two-column">
<!--[if (gte mso 9)|(IE)]>
<table width="100%">
<tr>
<td width="50%" valign="top">
<![endif]-->
<div class="column">
<table width="100%">
<tr>
<td class="inner">
<table class="contents">
<tr>
<td bgcolor="#082a36" height="300px">
<h1 style="margin: 25px; font-family: 'Lato', sans-serif; font-size: 20px; line-height: 24px; color: #ffffff; font-weight: bold;">Header</h1>
<p style="margin: 25px; font-family: 'Lato', sans-serif; font-size: 14px; line-height: 18px; color: #ffffff; font-weight: 400;">Lorem
ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque
vel ligula
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td><td width="50%" valign="top">
<![endif]-->
<div class="column">
<table width="100%">
<tr>
<td class="inner">
<table class="contents">
<tr>
<td>
<img src="https://dogtowndogtraining.com/wp-content/uploads/2012/06/300x300-061-e1340955308953.jpg"
width="300" alt="" />
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>

<tr>
<td>
<table dir="rtl" width="100%">

<tr>

<td width="50%" dir="ltr" class="rightonleft">

<p>Right-hand side content: Stacks on top on mobile</p>

</td>

<td width="50%" dir="ltr" class="rightonleft">

<p>Left-hand side content: Stacks underneath on mobile</p>

</td>

</tr>

</table>
</td>
</tr>

<tr>
<td class="two-column" dir="rtl">
<!--[if (gte mso 9)|(IE)]>
<table width="100%">
<tr>
<td width="50%" valign="top">
<![endif]-->
<div class="column">
<table width="100%">
<tr>
<td class="inner">
<table class="contents">
<tr>
<td>
<img src="https://dogtowndogtraining.com/wp-content/uploads/2012/06/300x300-061-e1340955308953.jpg"
width="300" alt="" />
</td>
</tr>
</table>

</td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td><td width="50%" valign="top">
<![endif]-->
<div class="column">
<table width="100%">
<tr>
<td class="inner">
<table class="contents">
<tr>
<td bgcolor="#082a36" height="300px">
<h1 style="margin: 25px; font-family: 'Lato', sans-serif; font-size: 20px; line-height: 24px; color: #ffffff; font-weight: bold;">Se
Header</h1>
<p style="margin: 25px; font-family: 'Lato', sans-serif; font-size: 14px; line-height: 18px; color: #ffffff; font-weight: 400;">Lorem
ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque
vel ligula
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</div>
</center>
</body>

</html>