Updated list of items

src/Components/Vegetables.js

@@ -37,10 +37,15 @@ export default class Map extends React.Component {
   }
 
   render() {
+    const {
+      double,
+      simple,
+    } = this.props;
+
     return (
       <div className="with-margin">
         <div className=" with-border with-background">
-          <ListGroup className="vegetables--types--group">
+          <ListGroup className={`vegetables--types--group ${simple ? '' : double ? 'double' : 'triple'}`}>
             {
               this.state.selectedType
               && this.state.selectedType.Vegetables

src/Routes/Map.js

@@ -93,15 +93,16 @@ export default class RouterMap extends React.Component {
                   </div>
                 </div>
               </Col>
-              <Col xs="6" sm="12">
-                <Vegetables
-                  selectedType={this.state.selectedType}
-                  selectedVegetable={this.state.selectedVegetable}
-                  selectVegetable={this.selectVegetable}
-                />
-              </Col>
             </Row>
           </Col>
+
+          <Col xs="12" sm="12">
+            <Vegetables
+              selectedType={this.state.selectedType}
+              selectedVegetable={this.state.selectedVegetable}
+              selectVegetable={this.selectVegetable}
+            />
+          </Col>
         </Row>
       </Container>
     );

src/Routes/Search.js

@@ -62,7 +62,6 @@ export default class Search extends React.Component {
       <Container>
         <NotificationContainer />
         <Row>
-
           <Col xs="12" sm="8">
             <MapItem
               selectedType={this.state.selectedType}
@@ -72,11 +71,12 @@ export default class Search extends React.Component {
           </Col>
           <Col xs="12" sm="4">
             <Row>
-              <Col xs="6" sm="12">
+              <Col xs="12">
                 <Vegetables
                   selectedType={this.state.selectedType}
                   selectedVegetable={this.state.selectedVegetable}
                   selectVegetable={this.selectVegetable}
+                  simple={true}
                 />
               </Col>
             </Row>

src/Routes/Vegetables.js

@@ -53,20 +53,21 @@ export default class RouterVegetables extends React.Component {
         <NotificationContainer />
         <Row>
 
-          <Col xs="12" sm="8">
+          <Col xs="12" md="6">
             <MapItem
               selectedType={this.state.selectedType}
               selectedVegetable={this.state.selectedVegetable}
               selectVegetable={this.selectVegetable}
             />
           </Col>
-          <Col xs="12" sm="4">
+          <Col xs="12" md="6">
             <Row>
-              <Col xs="6" sm="12">
+              <Col xs="12">
                 <VegetablesList
                   selectedType={this.state.selectedType}
                   selectedVegetable={this.state.selectedVegetable}
                   selectVegetable={this.selectVegetable}
+                  double={true}
                 />
               </Col>
             </Row>

src/css/index.css

@@ -44,6 +44,34 @@ body {
   -webkit-columns: 2;
   -moz-columns: 2;
 }
+
+@media (min-width: 540px) { 
+  .triple {
+    display: inherit;
+    columns: 2;
+    -webkit-columns: 2;
+    -moz-columns: 2;
+  }
+}
+
+@media (min-width: 720px) { 
+  .triple {
+    display: inherit;
+    columns: 3;
+    -webkit-columns: 3;
+    -moz-columns: 3;
+  }
+}
+
+@media (min-width: 960px) { 
+  .triple {
+    display: inherit;
+    columns: 4;
+    -webkit-columns: 4;
+    -moz-columns: 4;
+  }
+}
+
 .double li {
   /* width:50%;
   float:left;