Create an object that you can listen on for screen sizes with incomplete Bootstrap example.

bootstrap-example.jsx

'use strict';

import React from 'react';
import ReactDOM from 'react-dom';

import Responsive from './Responsive.js';

const Row = ({ children }) => {
	return (
		<div style={{ marginRight: -15, marginLeft: -15 }}>
			{children}
		</div>
	);
};

const Col = React.createClass({
	componentWillMount() {
		Responsive.addChangeListener(this._onChange);
	},
	componentWillUnmount() {
		Responsive.removeChangeListener(this._onChange);
	},
	_onChange() {
		this.forceUpdate();
	},
	render() {
		const sizes = [ 8.33333333, 16.66666667, 25, 33.33333333, 41.66666667, 50, 58.33333333, 66.66666667, 75, 83.33333333, 91.66666667, 100 ];

		const style = {
			position: 'relative',
			minHeight: 1,
			paddingRight: 15,
			paddingLeft: 15,
		};
		if (Responsive.isAtLeast(Responsive.DESKTOP) && this.props.lg) {
			style.width = sizes[this.props.lg - 1] + '%';
			style.float = 'left';
		}
		else if (Responsive.isAtLeast(Responsive.LAPTOP) && this.props.md) {
			style.width = sizes[this.props.md - 1] + '%';
			style.float = 'left';
		}
		else if (Responsive.isAtLeast(Responsive.TABLET) && this.props.sm) {
			style.width = sizes[this.props.sm - 1] + '%';
			style.float = 'left';
		}
		else if (Responsive.isAtLeast(Responsive.MOBILE) && this.props.xs) {
			style.width = sizes[this.props.xs - 1] + '%';
			style.float = 'left';
		}

		return (
			<div style={style}>
				{this.props.children}
			</div>
		);
	},

});

ReactDOM.render(
	<Row>
		<Col xs={12} sm={6} md={4} lg={2}>a</Col>
		<Col xs={12} sm={6} md={4} lg={2}>a</Col>
		<Col xs={12} sm={6} md={4} lg={2}>a</Col>
		<Col xs={12} sm={6} md={4} lg={2}>a</Col>
		<Col xs={12} sm={6} md={4} lg={2}>a</Col>
		<Col xs={12} sm={6} md={4} lg={2}>a</Col>
	</Row>,
	document.getElementById('app')
);

Responsive.js

"use strict";

var EventEmitter = require('events').EventEmitter;
var CHANGE_EVENT = 'change';

var breakpoints = [0, 768, 992, 1200, Infinity];
var indexes;

var getSize = function() {
	// http://stackoverflow.com/a/11744120/808657
	var w = window;
	var d = w.document;
	var e = d.documentElement;
	var g = d.getElementsByTagName('body')[0];
	var x = w.innerWidth || e.clientWidth || g.clientWidth;
	var y = w.innerHeight|| e.clientHeight|| g.clientHeight;
	return { width:x, height:y };
};

// get the type of screen based on its size
var getType = function(size) {
	var breakpoint = breakpoints.filter(function(b) {
		return size >= b;
	});
	var i = breakpoints.indexOf(breakpoint.pop());
	return indexes[i];
};

class Responsive extends EventEmitter {

	constructor() {
		super();

		this.currentWidth = getSize().width;
		window.addEventListener('resize', () => {
			var oldWidth = this.currentWidth;

			this.currentWidth = getSize().width;

			var change = getType(oldWidth) !== getType(this.currentWidth);

			if (change) {
				// throttle ?
				this.emitChange();
			}
		}, true);

		window.addEventListener('orientationchange', () => {
			this.currentWidth = getSize().width;

			this.emitChange();
		}, true);
	}

	isAtLeast(type) {
		var i = indexes.indexOf(type);
		var min = breakpoints[i];
		return min <= this.currentWidth;
	}
	isAtMost(type) {
		var i = indexes.indexOf(type);
		var max = breakpoints[i + 1];
		return max > this.currentWidth;
	}

	emitChange() {
		this.emit(CHANGE_EVENT);
	}
	addChangeListener(callback) {
		this.on(CHANGE_EVENT, callback);
	}
	removeChangeListener(callback) {
		this.removeListener(CHANGE_EVENT, callback);
	}

	triggerResizeEvent() {
		// http://stackoverflow.com/a/31899998/808657
		var evt = window.document.createEvent('UIEvents');
		evt.initUIEvent('resize', true, false, window, 0);
		window.dispatchEvent(evt);
	}

}

const responsive = new Responsive();

responsive.MOBILE = 'xs';
responsive.TABLET = 'sm';
responsive.LAPTOP = 'md';
responsive.DESKTOP = 'lg';

indexes = [
	responsive.MOBILE,
	responsive.TABLET,
	responsive.LAPTOP,
	responsive.DESKTOP,
];

module.exports = responsive;