content: import React from 'react';
  import classNames from 'classnames';
  import styleMaps from './styleMaps';
  import CustomPropTypes from './utils/CustomPropTypes';
  
  const Col = React.createClass({
    propTypes: {
      /**
       * The number of columns you wish to span
       *
       * for Extra small devices Phones (<768px)
       *
       * class-prefix `col-xs-`
       */
      xs: React.PropTypes.number,
      /**
       * The number of columns you wish to span
       *
       * for Small devices Tablets (≥768px)
       *
       * class-prefix `col-sm-`
       */
      sm: React.PropTypes.number,
      /**
       * The number of columns you wish to span
       *
       * for Medium devices Desktops (≥992px)
       *
       * class-prefix `col-md-`
       */
      md: React.PropTypes.number,
      /**
       * The number of columns you wish to span
       *
       * for Large devices Desktops (≥1200px)
       *
       * class-prefix `col-lg-`
       */
      lg: React.PropTypes.number,
      /**
       * Move columns to the right
       *
       * for Extra small devices Phones
       *
       * class-prefix `col-xs-offset-`
       */
      xsOffset: React.PropTypes.number,
      /**
       * Move columns to the right
       *
       * for Small devices Tablets
       *
       * class-prefix `col-sm-offset-`
       */
      smOffset: React.PropTypes.number,
      /**
       * Move columns to the right
       *
       * for Medium devices Desktops
       *
       * class-prefix `col-md-offset-`
       */
      mdOffset: React.PropTypes.number,
      /**
       * Move columns to the right
       *
       * for Large devices Desktops
       *
       * class-prefix `col-lg-offset-`
       */
      lgOffset: React.PropTypes.number,
      /**
       * Change the order of grid columns to the right
       *
       * for Extra small devices Phones
       *
       * class-prefix `col-xs-push-`
       */
      xsPush: React.PropTypes.number,
      /**
       * Change the order of grid columns to the right
       *
       * for Small devices Tablets
       *
       * class-prefix `col-sm-push-`
       */
      smPush: React.PropTypes.number,
      /**
       * Change the order of grid columns to the right
       *
       * for Medium devices Desktops
       *
       * class-prefix `col-md-push-`
       */
      mdPush: React.PropTypes.number,
      /**
       * Change the order of grid columns to the right
       *
       * for Large devices Desktops
       *
       * class-prefix `col-lg-push-`
       */
      lgPush: React.PropTypes.number,
      /**
       * Change the order of grid columns to the left
       *
       * for Extra small devices Phones
       *
       * class-prefix `col-xs-pull-`
       */
      xsPull: React.PropTypes.number,
      /**
       * Change the order of grid columns to the left
       *
       * for Small devices Tablets
       *
       * class-prefix `col-sm-pull-`
       */
      smPull: React.PropTypes.number,
      /**
       * Change the order of grid columns to the left
       *
       * for Medium devices Desktops
       *
       * class-prefix `col-md-pull-`
       */
      mdPull: React.PropTypes.number,
      /**
       * Change the order of grid columns to the left
       *
       * for Large devices Desktops
       *
       * class-prefix `col-lg-pull-`
       */
      lgPull: React.PropTypes.number,
      /**
       * You can use a custom element for this component
       */
      componentClass: CustomPropTypes.elementType
    },
  
    getDefaultProps() {
      return {
        componentClass: 'div'
      };
    },
  
    render() {
      let ComponentClass = this.props.componentClass;
      let classes = {};
  
      Object.keys(styleMaps.SIZES).forEach( key => {
        let size = styleMaps.SIZES[key];
        let prop = size;
        let classPart = size + '-';
  
        if (this.props[prop]) {
          classes['col-' + classPart + this.props[prop]] = true;
        }
  
        prop = size + 'Offset';
        classPart = size + '-offset-';
        if (this.props[prop] >= 0) {
          classes['col-' + classPart + this.props[prop]] = true;
        }
  
        prop = size + 'Push';
        classPart = size + '-push-';
        if (this.props[prop] >= 0) {
          classes['col-' + classPart + this.props[prop]] = true;
        }
  
        prop = size + 'Pull';
        classPart = size + '-pull-';
        if (this.props[prop] >= 0) {
          classes['col-' + classPart + this.props[prop]] = true;
        }
      }, this);
  
      return (
        <ComponentClass {...this.props} className={classNames(this.props.className, classes)}>
          {this.props.children}
        </ComponentClass>
      );
    }
  });
  
  export default Col;
  