JSFiddle - React, Tailwind, and code Playground

by Michael Baas

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<div class="container">

  <div class="row" style="width: 800px;border: 5px solid red;">

    <div class="col-md-6 col-sm-3 col-12" style="border: 3px solid  blue">
      Use entire row on xs, 25% on sm and hald on md (768) and above
    </div>
    <div class="col-md-6 col-sm-9 col-12" style="border: 3px solid  green;">
      Separate row on xs, filling up row in larger containers
    </div>


  </div>
</div>