react-grid

<Container>
  <Row>
    <Col sm>One of three columns</Col>
    <Col sm>One of three columns</Col>
    <Col sm>One of three columns</Col>
  </Row>
</Container>

<Container>
  <Row>
    <Col>1 of 2</Col>
    <Col>2 of 2</Col>
  </Row>
  <Row>
    <Col>1 of 3</Col>
    <Col>2 of 3</Col>
    <Col>3 of 3</Col>
  </Row>
</Container>

<Container>
  <Row>
    <Col>Column</Col>
    <Col>Column</Col>
    <div style={{ width: '100%' }} />
    <Col>Column</Col>
    <Col>Column</Col>
  </Row>
</Container>

<Container>
  <Row>
    <Col>1 of 3</Col>
    <Col xs={6}>2 of 3 (wider)</Col>
    <Col>3 of 3</Col>
  </Row>
  <Row>
    <Col>1 of 3</Col>
    <Col xs={5}>2 of 3 (wider)</Col>
    <Col>3 of 3</Col>
  </Row>
</Container>

<Container>
  <Row>
    <Col lg={2}>1 of 3</Col>
    <Col md="auto">Variable width content</Col>
    <Col lg={2}>3 of 3</Col>
  </Row>
  <Row>
    <Col>1 of 3</Col>
    <Col md="auto">Variable width content</Col>
    <Col xs lg={2}>
      3 of 3
    </Col>
  </Row>
</Container>

<Container>
  <Row>
    <Col>col</Col>
    <Col>col</Col>
    <Col>col</Col>
    <Col>col</Col>
  </Row>
  <Row>
    <Col xs={8}>col-8</Col>
    <Col xs={4}>col-4</Col>
  </Row>
</Container>

<Container>
  <Row>
    <Col sm={8}>col-sm-8</Col>
    <Col sm={4}>col-sm-4</Col>
  </Row>
  <Row>
    <Col sm>col-sm</Col>
    <Col sm>col-sm</Col>
    <Col sm>col-sm</Col>
  </Row>
</Container>

<Container>
  <Row>
    <Col xs={12} md={8}>
      .col-12 .col-md-8
    </Col>
    <Col xs={6} md={4}>
      .col-6 .col-md-4
    </Col>
  </Row>
  <Row>
    <Col xs={6} md={4}>
      .col-6 .col-md-4
    </Col>
    <Col xs={6} md={4}>
      .col-6 .col-md-4
    </Col>
    <Col xs={6} md={4}>
      .col-6 .col-md-4
    </Col>
  </Row>
  <Row>
    <Col xs={6}>.col-6</Col>
    <Col xs={6}>.col-6</Col>
  </Row>
</Container>

<Row noGutters>
  <Col xs={12} sm={6} md={8}>
    .col-12 .col-sm-6 .col-md-8
  </Col>
  <Col xs={6} md={4}>
    .col-6 .col-md-4
  </Col>
</Row>

<Container>
  <Row>
    <Col>First, but unordered</Col>
    <Col order={{ xs: 12 }}>Second, but last</Col>
    <Col order={{ xs: 1 }}>Third, but first</Col>
  </Row>
</Container>

<Container>
  <Row>
    <Col order={{ xs: 'last' }}>First, but last</Col>
    <Col>Second, but unordered</Col>
    <Col order={{ xs: 'first' }}>Third, but first</Col>
  </Row>
</Container>

<Container>
  <Row>
    <Col md={4}>.col-md-4</Col>
    <Col md={4} offset={{ md: 4 }}>
      .col-md-4 .offset-md-4
    </Col>
  </Row>
  <Row>
    <Col md={3} offset={{ md: 3 }}>
      .col-md-3 .offset-md-3
    </Col>
    <Col md={3} offset={{ md: 3 }}>
      .col-md-3 .offset-md-3
    </Col>
  </Row>
  <Row>
    <Col md={6} offset={{ md: 3 }}>
      .col-md-6 .offset-md-3
    </Col>
  </Row>
</Container>