Positioned the whiteboard and chat vertically in portrait mode.

bigbluebutton-html5/app/client/stylesheets/chat.less

@@ -8,15 +8,16 @@
 }
 
 #chat {
+  @media @landscape {
     -webkit-flex: 3 3 30%;
     -moz-flex: 3 3 30%;
     -ms-flex: 3 3 30%;
     flex: 3 3 30%;
     height: 100%;
+  }
   margin-left: 2px;
   margin-right: 2px;
   margin-top: 5px;
-  height: 100%;
 }
 
 .chat {

bigbluebutton-html5/app/client/stylesheets/style.less

@@ -31,7 +31,6 @@ body {
   background: extract(@white, 1);
   border: 1px solid extract(@lightGrey, 3);
   float: left;
-  height: 100%;
 }
 
 .extraConversationScrollableMenu {
@@ -280,6 +279,7 @@ body {
 }
 
 #container {
+  @media @landscape {
     display: -moz-flex;
     display: -ms-flexbox;
     display: -ms-flex;
@@ -287,6 +287,7 @@ body {
     display: flex;
     -webkit-flex-flow: row;
     flex-flow: row;
+  }
   width: 100%;
   height: 100%;
 }
@@ -628,10 +629,12 @@ body {
 }
 
 #main {
+  @media @landscape {
     -webkit-flex: 4 4 80%;
     -moz-flex: 4 4 80%;
     -ms-flex: 4 4 80%;
     flex: 4 4 80%;
+  }
   height: 100%;
 }
 
@@ -641,8 +644,14 @@ body {
   display: -ms-flex;
   display: -webkit-flex;
   display: flex;
+  @media @landscape {
     -webkit-flex-flow: row;
     flex-flow: row;
+  }
+  @media @mobile-portrait-with-keyboard, @desktop-portrait, @mobile-portrait {
+    -webkit-flex-flow: column;
+    flex-flow: column;
+  }
   width: 100%;
   height: calc(~'100% - 55px');
 }

bigbluebutton-html5/app/client/stylesheets/whiteboard.less

@@ -66,11 +66,13 @@
 }*/
 
 #whiteboard {
+  @media @landscape {
     -webkit-flex: 7 7 70%;
     -moz-flex: 7 7 70%;
     -ms-flex: 7 7 70%;
     flex: 7 7 70%;
     height: 100%;
+  }
   margin-left: 4px;
   margin-right: 2px;
   margin-top: 5px;