If my son, you seek guidance in life.

To rearrange the table cells, consider using the css property direction. It can be applied to text or inline-block elements.

There are various ways to apply it.

<row dir="rtl">
<td dir="rtl">
.main-content {direction: rtl;  /* Right to Left */}

This code snippet showcases how the row or td could be utilized:

<!-- header -->
<container class="header">
  <row dir="rtl">
    <columns large="6" small="12" class="text-right" dir="rtl">
      <p class="text-right" style="color: #432a6f; font-size: 12px; text-decoration: underline;"><a href="<%@ include view='MirrorPageUrl' %>" target="_blank">View this email on the web</a></p>
    </columns>
    <columns large="6" small="12" dir="rtl">
      <a href="http://example.com" target="_blank"><img style="display: inline-block" border="0" alt="Image name" src="http://example.com/sample.png" width="184" height="45"></a>
    </columns>
  </row>
</container>
<!-- .header -->

Experiment with inheriting direction from parent elements, either rtl or ltr.

You may want to assign direction to a class for tables within a @media query to facilitate swapping in mobile view. Here's an example:

@media only screen and (max-width: 600px) {
  .leftColumnContent {direction: rtl}
}

For further insights on direction, visit: https://css-tricks.com/almanac/properties/d/direction/

Best wishes.

If you have the option to use nth-child, then consider implementing the following CSS:

.templateColumns:nth-child(2n) > tbody > tr > td:nth-child(1){
   float: right;
} 
.templateColumns:nth-child(2n) > tbody > tr > td:nth-child(2){
   float: left;
} 

Make sure to adjust your markup accordingly for push and pull to function correctly. Both the left and right columns should contain similar content.

I've assigned the class .templateColumns to the table in this CodePen example.

Keep in mind that not all email clients support nth-child selector, Gmail being one that does not support it.

This is the solution you've been searching for. I took one of your tables and demonstrated how to swap columns effectively. It's important to keep both elements together for it to function correctly.

The technique utilized here is a hybrid approach. Each column is constructed using divs enclosed in a td element.

<td valign="top" bgcolor="#FFFFFF" class="templateColumnContainer" style="padding:0px;text-align: center; vertical-align: top; font-size: 0px; direction:rtl;">

This specific td has a direction property set to "right to left" (direction:rtl) which affects everything inside the div.

Subsequently, each column is created using divs that are half the width of the container td.

<div style="width:100%;max-width:280px;display: inline-block; vertical-align: top; direction:ltr;">
</div>

These divs have a maximum width of 280px, 100% width, and a direction setting of "left to right" (direction:ltr).

All content within the div can be structured as a table with 100% width.

I also implemented what some refer to as "ghost columns." This involves an Outlook conditional statement indicating that this section is indeed a column.

For the second block of code, rearranging the divs will achieve the desired layout.

If any part of this explanation seems unclear or if you need further clarification, feel free to reach out.

Cheers!

The HTML dir attribute allows you to control the layout independently of the source order of each column.

If you design the email layout for mobile first, you can then adjust the desktop layout using the dir attribute. Below is an example of a two-column layout where the image will stack above the text on mobile, but be positioned in the right column on desktop:

<!-- The magic happens with dir=rtl (rtl = right to left). This switches the alignment on wider screens while maintaining stacking order on narrower screens. -->

<table dir="rtl" border="0" cellpadding="0" cellspacing="0" width="600" id="templateColumns">
    <tr>

        <!-- Place this column first in the source order to have the image stack above the text on mobile -->
        <td align="center" valign="top" width="50%" class="templateColumnContainer">
            <table border="0" cellpadding="10" cellspacing="0" width="100%">
                <tr>
                    <td class="rightColumnContent" dir="ltr">
                        <img src="http://placekitten.com/g/480/300" width="280" style="max-width:280px;" class="columnImage" />
                    </td>
                </tr>
            </table>
        </td>

        <!-- Place this column second in the source order to have the image stack above the text on mobile -->
        <td align="center" valign="top" width="50%" class="templateColumnContainer">
            <table border="0" cellpadding="10" cellspacing="0" width="100%">
                <tr>
                    <td class="leftColumnContent" dir="ltr">
                        <p style ="font-size:21px; color:#009DE0; width: 125px; line-height: 22px;";> Selección de profesionales en plantilla o freelance.</p>
                        <p style="font-size: 13px; line-height: 19px; width: 218px;"> A partir de un Job description acordado con el cliente, procedemos a entrevistar y a validar técnicamente a los candidatos que cumplan con los requisitos técnicos y personales, previamente establecidos.</p>
                    </td>
                </tr>
            </table>
        </td>

    </tr>
</table>

Your existing media query to stack the columns should seamlessly integrate with this code.