Positioned the whiteboard and chat vertically in portrait mode.

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

@@ -8,15 +8,16 @@
 }
 
 #chat {
-  -webkit-flex: 3 3 30%;
-  -moz-flex: 3 3 30%;
-  -ms-flex: 3 3 30%;
-  flex: 3 3 30%;
-  height: 100%;
+  @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,13 +279,15 @@ body {
 }
 
 #container {
-  display: -moz-flex;
-  display: -ms-flexbox;
-  display: -ms-flex;
-  display: -webkit-flex;
-  display: flex;
-  -webkit-flex-flow: row;
-  flex-flow: row;
+  @media @landscape {
+    display: -moz-flex;
+    display: -ms-flexbox;
+    display: -ms-flex;
+    display: -webkit-flex;
+    display: flex;
+    -webkit-flex-flow: row;
+    flex-flow: row;
+  }
   width: 100%;
   height: 100%;
 }
@@ -628,10 +629,12 @@ body {
 }
 
 #main {
-  -webkit-flex: 4 4 80%;
-  -moz-flex: 4 4 80%;
-  -ms-flex: 4 4 80%;
-  flex: 4 4 80%;
+  @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;
-  -webkit-flex-flow: row;
-  flex-flow: row;
+  @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 {
-  -webkit-flex: 7 7 70%;
-  -moz-flex: 7 7 70%;
-  -ms-flex: 7 7 70%;
-  flex: 7 7 70%;
-  height: 100%;
+  @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;