Modern JavaScript Web Development Cookbook

Reordering elements

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> ...