From 1bee8a246df4c0b1a4aebfe908a3623737b737b2 Mon Sep 17 00:00:00 2001
From: Csaba Palfi <csaba@palfi.me>
Date: Sat, 12 Dec 2015 08:48:32 +0000
Subject: [PATCH] [added] responsively hiding columns

Signed-off-by: Csaba Palfi <csaba@palfi.me>
---
 docs/examples/GridBasic.js |  2 +-
 src/Col.js                 | 34 ++++++++++++++++++++++++++++++++++
 test/ColSpec.js            | 12 ++++++++++++
 3 files changed, 47 insertions(+), 1 deletion(-)

diff --git a/docs/examples/GridBasic.js b/docs/examples/GridBasic.js
index bf45640919..c8125403b6 100644
--- a/docs/examples/GridBasic.js
+++ b/docs/examples/GridBasic.js
@@ -8,7 +8,7 @@ const gridInstance = (
     <Row className="show-grid">
       <Col xs={6} md={4}><code>&lt;{'Col xs={6} md={4}'} /&gt;</code></Col>
       <Col xs={6} md={4}><code>&lt;{'Col xs={6} md={4}'} /&gt;</code></Col>
-      <Col xs={6} md={4}><code>&lt;{'Col xs={6} md={4}'} /&gt;</code></Col>
+      <Col xsHidden md={4}><code>&lt;{'Col xsHidden md={4}'} /&gt;</code></Col>
     </Row>
 
     <Row className="show-grid">
diff --git a/src/Col.js b/src/Col.js
index 94f5edbe87..9ee4d79865 100644
--- a/src/Col.js
+++ b/src/Col.js
@@ -37,6 +37,38 @@ const Col = React.createClass({
      * class-prefix `col-lg-`
      */
     lg: React.PropTypes.number,
+    /**
+     * Hide column
+     *
+     * on Extra small devices Phones
+     *
+     * adds class `hidden-xs`
+     */
+    xsHidden: React.PropTypes.bool,
+    /**
+     * Hide column
+     *
+     * on Small devices Tablets
+     *
+     * adds class `hidden-sm`
+     */
+    smHidden: React.PropTypes.bool,
+    /**
+     * Hide column
+     *
+     * on Medium devices Desktops
+     *
+     * adds class `hidden-md`
+     */
+    mdHidden: React.PropTypes.bool,
+    /**
+     * Hide column
+     *
+     * on Large devices Desktops
+     *
+     * adds class `hidden-lg`
+     */
+    lgHidden: React.PropTypes.bool,
     /**
      * Move columns to the right
      *
@@ -158,6 +190,8 @@ const Col = React.createClass({
         classes['col-' + classPart + this.props[prop]] = true;
       }
 
+      classes['hidden-' + size] = this.props[size + 'Hidden'];
+
       prop = size + 'Offset';
       classPart = size + '-offset-';
       if (this.props[prop] >= 0) {
diff --git a/test/ColSpec.js b/test/ColSpec.js
index a5bcc35593..5ca480659f 100644
--- a/test/ColSpec.js
+++ b/test/ColSpec.js
@@ -40,4 +40,16 @@ describe('Col', () => {
     assert.ok(instanceClassName.match(/\bcol-md-push-0\b/));
     assert.ok(instanceClassName.match(/\bcol-lg-push-0\b/));
   });
+
+  it('Should set Hidden to true', () => {
+    let instance = ReactTestUtils.renderIntoDocument(
+      <Col xsHidden smHidden mdHidden lgHidden />
+    );
+
+    let instanceClassName = ReactDOM.findDOMNode(instance).className;
+    assert.ok(instanceClassName.match(/\bhidden-xs\b/));
+    assert.ok(instanceClassName.match(/\bhidden-sm\b/));
+    assert.ok(instanceClassName.match(/\bhidden-md\b/));
+    assert.ok(instanceClassName.match(/\bhidden-lg\b/));
+  });
 });