By using col-xx-yy classes (such as col-sm-3 or col-md-5) you can decide the size of elements depending on the current screen width. The following code example shows that—and notice I avoided a separate style sheet, just to simplify:

// Source file: /src/App.1.js

/* @flow */

import React, { Component } from "react";

class App extends Component<{}> {
    render() {
        const cl = "border border-dark p-2 bg-warning ";

        return (
            <div className="container mw-100">
                <div className="row border">
                    <div className={cl + "col-sm-2 col-md-6"}>2/6</div>
                    <div className={cl + "col-sm-4"}>4</div>
                    <div className={cl + "col-sm-1"}>1</div>
                    <div className={cl + "col-sm-1"}>1</div>
                    <div className={cl + "col-sm-1"}>1</div>
                    <div className={cl + "col-sm-1 col-md-5"}>1/5</div>
                    <div className={cl + "col-sm-2 "}>2</div>
                    <div className={cl + "col-sm-7 col-md-3"}>7/3</div>
                    <div className={cl + "col-sm-4 "}>4</div>
                    <div className={cl + "col-sm-1 col-md-3"}>1/3</div>
                </div>
            </div>
        );
    }
}

export default App;

We can see how rendering changes with screen size; see following image:

At the smallest screen size, all elements are rendered at the same size vertically; this would suit, logically, a very small device. As we enlarge the window size, the 7/3 element now takes up 7 columns, while the 2/6, 1/5, and 1/3 elements are narrow. When we increase the window width even more, note the 7/3 element takes only three columns, and the 3 other elements become wide.

Of course, it's highly unlikely you'd ever come up with this weird design, with so many different widths and such peculiar resizing rules, but the point here is that by using the Bootstrap grid, elements can vary in size and gracefully flow to different rows, without having to do anything special.