Our final type of design rule is that some components (or parts of them) should possibly not be displayed at given screen sizes. For instance, if you were providing information about a movie, in large screens you could include a still from a scene, plus pictures of the main actors, in addition to the movie title and a full description, but in small screens you could make do with just the movie title and basic information. Let's show this kind of requirement with a couple of components: one will be fully hidden, while the other will just hide part of its contents:

// Source file: /src/App.3.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={ch + "d-none d-sm-block col-sm-4"}>
                        0/4
                    </div>
                    <div className={cl + "col-sm-2"}>2</div>
                    <div className={cl + "col-sm-2"}>2</div>
                    <div className={cl + "col-sm-1 col-md-5"}>1/5</div>
                    <div className={cl + "col-sm-3 "}>3</div>
                    <div className={ch + "col-sm-7 "}>
                        <div>TOP</div>
                        <div className="d-none d-sm-block">(MIDDLE)
                        </div>
                        <div>BOTTOM</div>
                    </div>
                    <div className={cl + "col-sm-4 "}>4</div>
                </div>
            </div>
        );
    }
}

export default App;

To see this in action, check out the following image:

The 0/4 component is set to be shown only at small screens and more, so in the left side screenshot it just disappears. The other component shows two lines in the smaller screen, but fuller contents (OK, three lines instead of two) in bigger screens.