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>