Combine columns for mobile

frontend/src/components/Blocks.css

@@ -2,6 +2,10 @@
   width: 500px;
 }
 
+.centerBlockMobile {
+  display: none;
+}
+
 .contentBlock {
   color: var(--text);
   background-color: #fff;
@@ -13,9 +17,13 @@
   min-width: 500px;
 }
 
-@media screen and (max-width: 500px) {
-  .contentBlock {
-    padding: 18px;
-    margin: 0 0 18px 0;
+@media screen and (max-width: 1200px) {
+  .centerBlockInner {
+    display: none;
+  }
+
+  .centerBlockMobile {
+    display: block;
+    max-width: 600px;
   }
 }

frontend/src/components/Blocks.js

@@ -1,12 +1,6 @@
 import { useState, useEffect } from 'react';
-import UserAgentBlock from './UserAgentBlock';
-import IntlBlock from './IntlBlock';
-import OtherBlock from './OtherBlock';
-import NavigatorBlock from './NavigatorBlock';
-import ScreenBlock from './ScreenBlock';
-import FingerprintBlock from './FingerprintBlock';
-import LocationBlock from './LocationBlock';
-import ConnectionBlock from './ConnectionBlock';
+import BlocksOne from './BlocksOne';
+import BlocksTwo from './BlocksTwo';
 // import FontsBlock from './FontsBlock';
 import { fetchAPI, getWebWorker } from '../utils/common';
 import './Blocks.css';
@@ -26,22 +20,20 @@ const Blocks = () => {
       {connectionData ? (
         <>
           <div className="centerBlockInner">
-            <FingerprintBlock workerData={workerData} />
-            <NavigatorBlock workerData={workerData} />
-            <UserAgentBlock workerAgent={workerData.userAgent} />
-            <IntlBlock workerData={workerData} />
+            <BlocksOne workerData={workerData} />
           </div>
           <div className="centerBlockInner">
-            <LocationBlock
+            <BlocksTwo
               workerData={workerData}
               connectionData={connectionData}
             />
-            <ConnectionBlock
+          </div>
+          <div className="centerBlockMobile">
+            <BlocksOne workerData={workerData} />
+            <BlocksTwo
               workerData={workerData}
               connectionData={connectionData}
             />
-            <ScreenBlock />
-            <OtherBlock workerData={workerData} />
           </div>
         </>
       ) : (

frontend/src/components/BlocksOne.js

@@ -0,0 +1,15 @@
+import UserAgentBlock from './UserAgentBlock';
+import IntlBlock from './IntlBlock';
+import NavigatorBlock from './NavigatorBlock';
+import FingerprintBlock from './FingerprintBlock';
+
+const BlocksOne = ({ workerData }) => (
+  <>
+    <FingerprintBlock workerData={workerData} />
+    <NavigatorBlock workerData={workerData} />
+    <UserAgentBlock workerAgent={workerData.userAgent} />
+    <IntlBlock workerData={workerData} />
+  </>
+);
+
+export default BlocksOne;

frontend/src/components/BlocksTwo.js

@@ -0,0 +1,15 @@
+import OtherBlock from './OtherBlock';
+import ScreenBlock from './ScreenBlock';
+import LocationBlock from './LocationBlock';
+import ConnectionBlock from './ConnectionBlock';
+
+const BlocksTwo = ({ workerData, connectionData }) => (
+  <>
+    <LocationBlock workerData={workerData} connectionData={connectionData} />
+    <ConnectionBlock workerData={workerData} connectionData={connectionData} />
+    <ScreenBlock />
+    <OtherBlock workerData={workerData} />
+  </>
+);
+
+export default BlocksTwo;