In the previous example, we saw how components resized themselves, and flowed across lines. However, there are other requirements: for instance, you could want a component to appear at a different position for a given screen size. Fortunately, Bootstrap also allows for that. Let's have an element that will change its place among the rest:

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

/* @flow */

import React, { Component } from "react";

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

        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={
                            ch + "col-sm-1 order-sm-first order-md-
                            last"
                        }
                    >
                        1
                    </div>
                    <div className={cl + "col-sm-1 col-md-5"}>1/5</div>
                    <div className={cl + "col-sm-3 "}>3</div>
                </div>
            </div>
        );
    }
}

export default App;

For small devices, our special component should be the first, and for medium ones, it should move to the end. For very small devices (for which we haven't provided any special rules) it should appear at its normal place. See the following images:

This takes care of a common second set of requirements, letting you vary at will the sequence in which components appear on screen. We only have one more case, which we'll see in the next section.