JSFiddle - React, Tailwind, and code Playground

by noyb

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css">
<div class="container-fluid">
  <div class="row">
    <div class="left-side col-lg-3 col-12 text-lg-left text-center order-lg-1 order-3">
      <h3>Left side.</h3>
      <p class="lead">First, but last at certain resolutions.</p>
      <p>Integer nec dignissim purus. Curabitur in dui enim. Nullam interdum mi a massa posuere, sit amet tempor tortor dignissim. Pellentesque semper nunc et tortor facilisis pellentesque. Sed a lacinia massa. Vestibulum pulvinar lectus vel urna suscipit fringilla. In ut pellentesque erat. Cras porttitor erat ex, at semper augue scelerisque a.</p>
    </div>
    <div class="center col-lg-6 col-12 text-center order-lg-2 order-1">
      <h1>Center.</h1>
      <p class="lead">Second, but first at certain resolutions.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras fermentum ornare leo eget elementum. Proin ex augue, bibendum in sapien eu, aliquet convallis diam. Vestibulum cursus feugiat nisi bibendum bibendum. Integer aliquam lacinia convallis. Vivamus sed neque erat. Praesent sollicitudin tincidunt metus eget posuere. Sed rutrum fermentum varius. Maecenas risus neque, porttitor sed erat ac, iaculis dapibus purus. Vestibulum ullamcorper quam nibh, et ornare nunc rutrum id. Phasellus ultricies eget augue vitae hendrerit. Quisque consequat pellentesque neque, nec sagittis eros convallis aliquam. Nulla malesuada augue eu elit molestie lobortis. Maecenas finibus lacinia elit, eu eleifend eros iaculis ut. In fermentum blandit ligula at sagittis. Fusce non sem feugiat, dapibus magna quis, interdum quam. Maecenas vitae pharetra nunc.</p>
    </div>
    <div class="right-side col-lg-3 col-12 text-lg-right text-center order-lg-3 order-2">
      <h3>Right side.</h3>
      <p class="lead">Third, but second at certain resolutions.</p>
      <p>Integer nec dignissim purus. Curabitur in dui enim. Nullam...

CSS

.left-side {
  border:5px solid grey;
}
.center {
  border:5px solid black;
}
.right-side {
  border:5px solid gainsboro;
}
footer {
  background-color:lightgrey;
}