JSFiddle - React, Tailwind, and code Playground

by Rafael Ramos

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class="container-fluid">
  <div class="row">
    <div class="col20-sm col-xs-12">Column 20% sm, Col 100% xs</div>
    <div class="col20-sm col-xs-12">Column 20%, Col 100% xs</div>
    <div class="col20-sm col-xs-12">Column 20%, Col 100% xs</div>
    <div class="col20-sm col-xs-12">Column 20%, Col 100% xs</div>
    <div class="col20-sm col-xs-12">Column 20%, Col 100% xs</div>
  </div>
</div>

CSS

.col20-xs, .col20-sm, .col20-md, .col20-lg { 
	position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
	float: left;
}

.col20-xs { width: 20%; }

@media (min-width: 768px) {
  .col20-sm { width: 20%; }  
}

@media (min-width: 992px) {
  .col20-md { width: 20%; }
}

@media (min-width: 1200px) {
  .col20-lg { width: 20%; }
}

/* This styles are just to make it look nice, but not necessary */
.container-fluid {background-color: #eee;border: 1px solid #e1e1e8;border-radius: 5px;}
.col20-xs, .col20-sm, .col20-md, .col20-lg {background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);border-radius: 5px;padding: 5px;}