On tablets and mobile hide line number and wrap code onto next line instead of scrolling horizontally

static/css/custom-classes.less

@@ -28,6 +28,9 @@
         table-layout: fixed;
         width: 100%;
         td.linenos {
+            @media (max-width:@screen-md) {
+                display:none;
+            }
             padding-right: 1px; // On Chrome any value higher than 1 breaks
             width: @el-syntax-highlight-line-no-width;
             div.linenodiv  {
@@ -43,15 +46,29 @@
         td.code {
             width: 100 - @el-syntax-highlight-line-no-width;
             div.highlight {
-                // pygments.css has  a rule for div.highlight color. Give it the same border that
-                // descendent pre has.
-                border-radius: 0 @border-radius-base @border-radius-base 0;
-                pre {
+                // on small screen, no point in displaying custom rounded corner box because
+                // line number column is hidden
+                @media (min-width:@screen-md) {
+                    // pygments.css has  a rule for div.highlight color. Give it the same border that
+                    // descendent pre has.
                     border-radius: 0 @border-radius-base @border-radius-base 0;
-                    // from http://stackoverflow.com/a/10374189/177116
-                    overflow: auto;
-                    white-space: pre;
-                    word-wrap: normal;
+                    pre {
+                        border-radius: 0 @border-radius-base @border-radius-base 0;
+                        // from http://stackoverflow.com/a/10374189/177116
+                        overflow: auto;
+                        white-space: pre;
+                        word-wrap: normal;
+                    }
+                }
+                @media (max-width:@screen-md) {
+                    pre {
+                        // from http://stackoverflow.com/a/248013/177116
+                        white-space: pre-wrap;       /* CSS 3 */
+                        white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
+                        white-space: -o-pre-wrap;    /* Opera 7 */
+                        white-space: -pre-wrap;      /* Opera 4-6 */
+                        word-wrap: break-word;       /* Internet Explorer 5.5+ */
+                    }
                 }
             }
         }