diff --git a/src/core/features/login/pages/reconnect/reconnect.html b/src/core/features/login/pages/reconnect/reconnect.html
index 94d6a452c..a16c76911 100644
--- a/src/core/features/login/pages/reconnect/reconnect.html
+++ b/src/core/features/login/pages/reconnect/reconnect.html
@@ -63,14 +63,14 @@
                         </ion-input>
                     </core-show-password>
                 </ion-item>
-                <div class="adaptable-buttons-row">
-                    <ion-button expand="block" fill="outline" (click)="cancel($event)" class="ion-margin ion-text-wrap">
-                        {{ 'core.login.cancel' | translate }}
-                    </ion-button>
+                <div class="adaptable-buttons-row-reverse">
                     <ion-button *ngIf="!isBrowserSSO" type="submit" expand="block" [disabled]="!credForm.valid"
                         class="ion-margin core-login-login-button ion-text-wrap">
                         {{ 'core.login.loginbutton' | translate }}
                     </ion-button>
+                    <ion-button expand="block" fill="outline" (click)="cancel($event)" class="ion-margin ion-text-wrap">
+                        {{ 'core.login.cancel' | translate }}
+                    </ion-button>
                 </div>
 
                 <ion-button expand="block" *ngIf="isBrowserSSO" (click)="openBrowserSSO()"
diff --git a/src/theme/theme.base.scss b/src/theme/theme.base.scss
index f0245c87c..1d3272385 100644
--- a/src/theme/theme.base.scss
+++ b/src/theme/theme.base.scss
@@ -1674,13 +1674,19 @@ ion-grid.core-no-grid > ion-row {
 }
 
 @include media-breakpoint-up(md) {
-    .adaptable-buttons-row {
+    .adaptable-buttons-row,
+    .adaptable-buttons-row-reverse {
         display: flex;
         flex-direction: row;
         ion-button {
             flex: 1;
         }
     }
+
+    // Buttons will be in reverse order when horizontal.
+    .adaptable-buttons-row-reverse {
+        flex-direction: row-reverse;
+    }
 }
 
 ion-header.no-title {