I'm trying to rearrange borders for mobile to look like this:
https://snag.gy/dREieY.jpg

I have two gmail clients currently rendering like this:
Android 6.0
https://snag.gy/K3w7jX.jpg

Gmail App (IMAP)
https://snag.gy/MgwxvT.jpg

The class I'm editing is in it's own block as ".borderswap" and it's applied to the <table> with the "border-right" inline style. The class seems to be getting ignored by these two clients alltogether. Does anyone know a way around this?

Here's my code at the moment:


~~~~ <!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
  <head>
    <title></title>
    <!--[if !mso]><!-- -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--<![endif]-->
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style type="text/css">
      #outlook a {
        padding: 0;
      }
      .ReadMsgBody {
        width: 100%;
      }
      .ExternalClass {
        width: 100%;
      }
      .ExternalClass * {
        line-height: 100%;
      }
      body {
        margin: 0;
        padding: 0;
        -webkit-text-size-adjust: 100%;
        -ms-text-size-adjust: 100%;
      }
      table,
      td {
        border-collapse: collapse;
        mso-table-lspace: 0;
        mso-table-rspace: 0;
      }
      img {
        border: 0;
        height: auto;
        line-height: 100%;
        outline: none;
        text-decoration: none;
        -ms-interpolation-mode: bicubic;
      }
      p {
        display: block;
        margin: 13px 0;
      }
    </style>
    <!--[if !mso]><!-->
    <style type="text/css">
      @media only screen and (max-width:480px) {
        table.borderswap {
          border-right: 0px !important;
          border-bottom: 2px solid black !important;
        }
      }
    </style>
    <style type="text/css">
      @media only screen and (max-width:480px) {
        @-ms-viewport {
          width: 320px;
        }
        @viewport {
          width: 320px;
        }
      }
    </style>
    <!--<![endif]-->
    <!--[if mso]> <xml> <o:OfficeDocumentSettings> <o:AllowPNG/> <o:PixelsPerInch>96</o:PixelsPerInch> </o:OfficeDocumentSettings> </xml> <![endif]-->
    <!--[if lte mso 11]> <style type="text/css"> .outlook-group-fix { width:100% !important; } </style> <![endif]-->
    <style type="text/css">
      @media only screen and (min-width:480px) {
        .mj-column-per-100 {
          width: 100% !important;
        }
        .mj-column-per-50 {
          width: 50% !important;
        }
      }
    </style>
    <style type="text/css"></style>
  </head>
  <body style="background-color:#FFFFFF;">
    <div style="background-color:#FFFFFF;">
      <!--[if mso | IE]> <table align="center" border="0" cellpadding="0" cellspacing="0" style="width:610px;" width="610" > <tr> <td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"> <![endif]-->
      <div style="Margin:0px auto;max-width:610px;">
        <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
          <tbody>
            <tr>
              <td style="direction:ltr;font-size:0px;padding:20px 0;padding-bottom:0;text-align:center;vertical-align:top;">
                <!--[if mso | IE]> <table role="presentation" border="0" cellpadding="0" cellspacing="0"> <tr> <td style="vertical-align:top;width:610px;" > <![endif]-->
                <div class="mj-column-per-100 outlook-group-fix" style="font-size:13px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
                  <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
                    <tr>
                      <td align="center" style="font-size:0px;padding:0;word-break:break-word;">
                        <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:collapse;border-spacing:0px;">
                          <tbody>
                            <tr>
                              <td style="width:610px;">
                                <img height="auto" src="http://image.email.sysco.com/lib/fe5f15707c63067c711c/m/1/8aa73f69-e87c-46d0-bd07-7d539354fa2c.png" style="border:0;display:block;outline:none;text-decoration:none;width:100%;" width="610"/>
                              </td>
                            </tr>
                          </tbody>
                        </table>
                      </td>
                    </tr>
                  </table>
                </div>
                <!--[if mso | IE]> </td> </tr> </table> <![endif]-->
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      <!--[if mso | IE]> </td> </tr> </table> <table align="center" border="0" cellpadding="0" cellspacing="0" style="width:610px;" width="610" > <tr> <td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"> <![endif]-->
      <div style="Margin:0px auto;max-width:610px;">
        <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
          <tbody>
            <tr>
              <td style="direction:ltr;font-size:0px;padding:20px 0;padding-top:0px;text-align:center;vertical-align:top;">
                <!--[if mso | IE]> <table role="presentation" border="0" cellpadding="0" cellspacing="0"> <tr> <td style="vertical-align:top;width:610px;" > <![endif]-->
                <div class="mj-column-per-100 outlook-group-fix" style="font-size:13px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
                  <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
                    <tr>
                      <td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
                        <div style="font-family:Arial, Helvetica, sans-serif;font-size:13px;font-weight:bold;line-height:1.4em;text-align:left;color:#000000;">
                          Business Impact<br>
                          OpCo 272 Quebec (Canada Broadline) order selection is unavailable at the location. Our BT support teams are engaged with urgency to resolve the issue.
                        </div>
                      </td>
                    </tr>
                    <tr>
                      <td align="left" style="font-size:0px;padding:10px 25px;padding-top:0;word-break:break-word;">
                        <div style="font-family:Arial, Helvetica, sans-serif;font-size:13px;font-weight:bold;line-height:1.4em;text-align:left;color:#000000;">
                          The OpCo is unable to perform order selection. Four delivery and 3 pickup routes are 4.5 hours behind schedule. The OpCo is able to receive inbound product.
                        </div>
                      </td>
                    </tr>
                  </table>
                </div>
                <!--[if mso | IE]> </td> </tr> </table> <![endif]-->
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      <!--[if mso | IE]> </td> </tr> </table> <table align="center" border="0" cellpadding="0" cellspacing="0" style="width:610px;" width="610" > <tr> <td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"> <![endif]-->
      <div style="Margin:0px auto;max-width:610px;">
        <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
          <tbody>
            <tr>
              <td style="border:2px solid #000000;direction:ltr;font-size:0px;padding:20px 0;padding-bottom:0;padding-top:0px;text-align:center;vertical-align:top;">
                <!--[if mso | IE]> <table role="presentation" border="0" cellpadding="0" cellspacing="0"> <tr> <td style="vertical-align:top;width:305px;" > <![endif]-->
                <div class="mj-column-per-50 outlook-group-fix" style="font-size:13px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
                  <table class="borderswap" border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-right:2px solid #000000;vertical-align:top;" width="100%">
                    <tr>
                      <td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
                        <div style="font-family:Arial, Helvetica, sans-serif;font-size:13px;font-weight:bold;line-height:1.4em;text-align:left;color:#000000;">
                          Impacted Locations<br>067 Sysco Houston<br>272 Sysco Quebec
                        </div>
                      </td>
                    </tr>
                  </table>
                </div>
                <!--[if mso | IE]> </td> <td style="vertical-align:top;width:305px;" > <![endif]-->
                <div class="mj-column-per-50 outlook-group-fix" style="font-size:13px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
                  <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
                    <tr>
                      <td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
                        <div style="font-family:Arial, Helvetica, sans-serif;font-size:13px;font-weight:bold;line-height:1.4em;text-align:left;color:#000000;">
                          Services or Capabilities<br>Transportation Management
                          <br>Warehouse Management
                        </div>
                      </td>
                    </tr>
                  </table>
                </div>
                <!--[if mso | IE]> </td> </tr> </table> <![endif]-->
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      <!--[if mso | IE]> </td> </tr> </table> <table align="center" border="0" cellpadding="0" cellspacing="0" style="width:610px;" width="610" > <tr> <td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"> <![endif]-->
      <div style="Margin:0px auto;max-width:610px;">
        <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
          <tbody>
            <tr>
              <td style="direction:ltr;font-size:0px;padding:20px 0;padding-top:0px;text-align:center;vertical-align:top;">
                <!--[if mso | IE]> <table role="presentation" border="0" cellpadding="0" cellspacing="0"> <tr> <td style="vertical-align:top;width:610px;" > <![endif]-->
                <div class="mj-column-per-100 outlook-group-fix" style="font-size:13px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
                  <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
                    <tr>
                      <td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
                        <div style="font-family:Arial, Helvetica, sans-serif;font-size:13px;font-weight:bold;line-height:1.4em;text-align:left;color:#000000;">
                          Restoration Details
                        </div>
                      </td>
                    </tr>
                    <tr>
                      <td align="left" style="font-size:0px;padding:10px 25px;padding-top:0;word-break:break-word;">
                        <div style="font-family:Arial, Helvetica, sans-serif;font-size:13px;font-weight:bold;line-height:1.4em;text-align:left;color:#000000;">
                          11:00AM CT: BT teams created a “in process stack” in a record in the inventory adjustment table to clear records in the load planner and disabled the EXE queue master refresh to restore service. EXE application teams will work offline with the vendor
                          to apply the updated license key.<br>
                          10:00AM CT: BT teams are coordinating with the vendor INFOR to obtain and apply a new license key. In parallel, BT teams are working to implement a workaround at the location within EXE.<br>
                          9:00AM CT: BT support teams confirmed the EXE license key has expired and are working with the vendor to generate the new license key.
                        </div>
                      </td>
                    </tr>
                  </table>
                </div>
                <!--[if mso | IE]> </td> </tr> </table> <![endif]-->
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      <!--[if mso | IE]> </td> </tr> </table> <table align="center" border="0" cellpadding="0" cellspacing="0" style="width:610px;" width="610" > <tr> <td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"> <![endif]-->
      <div style="Margin:0px auto;max-width:610px;">
        <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
          <tbody>
            <tr>
              <td style="border-bottom:2px solid #000000;border-top:2px solid #000000;direction:ltr;font-size:0px;padding:20px 0;padding-top:0px;text-align:center;vertical-align:top;">
                <!--[if mso | IE]> <table role="presentation" border="0" cellpadding="0" cellspacing="0"> <tr> <td style="vertical-align:top;width:305px;" > <![endif]-->
                <div class="mj-column-per-50 outlook-group-fix" style="font-size:13px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
                  <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
                    <tr>
                      <td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
                        <div style="font-family:Arial, Helvetica, sans-serif;font-size:13px;font-weight:bold;line-height:1.4em;text-align:left;color:#000000;">
                          Status: In Progress<br>
                          Start Time: Apr 30, 2018 08:30 AM
                          <br>
                          Resolved Time Duration: 1.5 hours
                          <br>
                          Next Update: Apr 30, 2018 11:00 AM
                          <br>
                          Remedy Ticket #: INC000007000816
                          <br>
                          Recurring Issue: No
                          <br>
                          Problem/RCA #:
                        </div>
                      </td>
                    </tr>
                  </table>
                </div>
                <!--[if mso | IE]> </td> <td style="vertical-align:top;width:305px;" > <![endif]-->
                <div class="mj-column-per-50 outlook-group-fix" style="font-size:13px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
                  <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
                    <tr>
                      <td align="left" style="font-size:0px;padding:10px 25px;padding-left:0;word-break:break-word;">
                        <div style="font-family:Arial, Helvetica, sans-serif;font-size:13px;font-weight:bold;line-height:1.4em;text-align:left;color:#000000;">
                          Incident Manager: Victoria Hartjoy<br>
                          Service Delivery Tower: Hosting<br>
                          Managed Services Partner:<br>
                          Managed Services Lead:<br>
                          Sysco Business Manager: Paul Martineau<br>
                          Caused by Change: No<br>
                          If yes, change #:<br>
                          End User/IVR Updates:
                        </div>
                      </td>
                    </tr>
                  </table>
                </div>
                <!--[if mso | IE]> </td> </tr> </table> <![endif]-->
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      <!--[if mso | IE]> </td> </tr> </table> <table align="center" border="0" cellpadding="0" cellspacing="0" style="width:610px;" width="610" > <tr> <td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"> <![endif]-->
      <div style="Margin:0px auto;max-width:610px;">
        <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
          <tbody>
            <tr>
              <td style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;vertical-align:top;">
                <!--[if mso | IE]> <table role="presentation" border="0" cellpadding="0" cellspacing="0"> <tr> <td style="vertical-align:top;width:610px;" > <![endif]-->
                <div class="mj-column-per-100 outlook-group-fix" style="font-size:13px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
                  <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
                    <tr>
                      <td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
                        <div style="font-family:Arial, Helvetica, sans-serif;font-size:13px;font-weight:bold;line-height:1.4em;text-align:left;color:#000000;">
                          For questions about this notification, please contact the Command Center. However, if you need to report an issue, do not email the Command Center. Instead, create an incident with the Service Desk (281-584-1190).
                        </div>
                      </td>
                    </tr>
                    <tr>
                      <td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
                        <div style="font-family:Arial, Helvetica, sans-serif;font-size:13px;font-weight:bold;line-height:1.4em;text-align:left;color:#000000;">
                          To update your associate communication notification preferences, click the button below.
                        </div>
                      </td>
                    </tr>
                    <tr>
                      <td align="center" vertical-align="middle" style="font-size:0px;padding:10px 25px;word-break:break-word;">
                        <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:separate;line-height:100%;">
                          <tr>
                            <td align="center" bgcolor="#447fc8" role="presentation" style="border:none;border-radius:3px;color:#ffffff;cursor:auto;padding:10px 25px;" valign="middle">
                              <a href="#" style="background:#447fc8;color:#ffffff;font-family:Arial, Helvetica, sans-serif;font-size:13px;font-weight:normal;line-height:1.4em;Margin:0;text-decoration:none;text-transform:none;" target="_blank">
                                Update Preferences
                              </a>
                            </td>
                          </tr>
                        </table>
                      </td>
                    </tr>
                  </table>
                </div>
                <!--[if mso | IE]> </td> </tr> </table> <![endif]-->
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      <!--[if mso | IE]> </td> </tr> </table> <table align="center" border="0" cellpadding="0" cellspacing="0" style="width:610px;" width="610" > <tr> <td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"> <![endif]-->
      <div style="background:#000000;background-color:#000000;Margin:0px auto;max-width:610px;">
        <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#000000;background-color:#000000;width:100%;">
          <tbody>
            <tr>
              <td style="direction:ltr;font-size:0px;padding:10px;text-align:center;vertical-align:top;">
                <!--[if mso | IE]> <table role="presentation" border="0" cellpadding="0" cellspacing="0"> <tr> <td style="vertical-align:middle;width:295px;" > <![endif]-->
                <div class="mj-column-per-50 outlook-group-fix" style="font-size:13px;text-align:left;direction:ltr;display:inline-block;vertical-align:middle;width:100%;">
                  <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:middle;" width="100%">
                    <tr>
                      <td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
                        <div style="font-family:Arial, Helvetica, sans-serif;font-size:13px;line-height:1.4em;text-align:left;color:#ffffff;">
                          To unsubscribe from Sysco communications click
                          <a href="%%unsubscribe%%" style="color:#ffffff;">here</a>.
                        </div>
                      </td>
                    </tr>
                  </table>
                </div>
                <!--[if mso | IE]> </td> <td style="vertical-align:middle;width:295px;" > <![endif]-->
                <div class="mj-column-per-50 outlook-group-fix" style="font-size:13px;text-align:left;direction:ltr;display:inline-block;vertical-align:middle;width:100%;">
                  <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:middle;" width="100%">
                    <tr>
                      <td align="right" style="font-size:0px;padding:10px 25px;word-break:break-word;">
                        <table align="right" border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:collapse;border-spacing:0px;">
                          <tbody>
                            <tr>
                              <td style="width:130px;">
                                <img height="auto" src="http://placehold.it/130x60" style="border:0;display:block;outline:none;text-decoration:none;width:100%;" width="130"/>
                              </td>
                            </tr>
                          </tbody>
                        </table>
                      </td>
                    </tr>
                  </table>
                </div>
                <!--[if mso | IE]> </td> </tr> </table> <![endif]-->
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      <!--[if mso | IE]> </td> </tr> </table> <![endif]-->
    </div>
  </body>
</html>  ~~~~