diff --git a/bigbluebutton-html5/imports/ui/components/app/component.jsx b/bigbluebutton-html5/imports/ui/components/app/component.jsx
index eaa3f40354..cf28abef8b 100644
--- a/bigbluebutton-html5/imports/ui/components/app/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/app/component.jsx
@@ -184,13 +184,13 @@ class App extends Component {
       <main className={styles.main}>
         <NotificationsBarContainer />
         <section className={styles.wrapper}>
-          {this.renderUserList()}
-          {this.renderChat()}
           <div className={styles.content}>
             {this.renderNavBar()}
             {this.renderMedia()}
             {this.renderActionsBar()}
           </div>
+          {this.renderUserList()}
+          {this.renderChat()}
           {this.renderSidebar()}
         </section>
         <ModalContainer />
diff --git a/bigbluebutton-html5/imports/ui/components/app/styles.scss b/bigbluebutton-html5/imports/ui/components/app/styles.scss
index eef6b56a7d..9c913f13e7 100644
--- a/bigbluebutton-html5/imports/ui/components/app/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/app/styles.scss
@@ -54,6 +54,7 @@ $bars-padding: $lg-padding-x - .45rem; // -.45 so user-list and chat title is al
 .content {
   @extend %full-page;
 
+  order: 3;
   padding: 0 .25%;
 
   &:before,
@@ -99,6 +100,8 @@ $bars-padding: $lg-padding-x - .45rem; // -.45 so user-list and chat title is al
   z-index: 2;
   overflow: visible;
 
+  order: 1;
+
   @include mq($small-only) {
     padding-top: $navbar-height;
   }
@@ -120,6 +123,8 @@ $bars-padding: $lg-padding-x - .45rem; // -.45 so user-list and chat title is al
 .chat {
   @extend %full-page;
 
+  order: 2;
+
   @include mq($small-only) {
     z-index: 3;
     padding-top: $navbar-height;