JSFiddle - React, Tailwind, and code Playground

by Chris Rebert

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<p>
  Click the buttons to show/hide the first column
</p>
<div class="container">
  <div class="row">
    <div class="col-xs-4" id="column1">Content 1</div>
    <div class="col-xs-8" id="column2">Content 2</div>
  </div>
  <button type="submit" id="resize-hidden">
    Resize with hidden-xs
  </button>
  <div class="row">
    <div class="col-xs-4" id="column3">Content 3</div>
    <div class="col-xs-8" id="column4">Content 4</div>
  </div>
  <button type="submit" id="resize-col-0">
    Resize with proposed col-0
  </button>
</div>

CSS

.col-0 {
  width: 0%;
  position: relative;
  float: left;
  padding-right: 0px;
  padding-left: 0px;
  overflow: hidden;
  
}

div.row div {
  height: 50px;
  line-height: 50px;
  text-align: center;
  vertical-align: center;
}

button {
  width: 100%;
}
#column1, #column3 {
  background-color: #aadddd;
}

#column2, #column4{
  background-color: #ddddaa;
}

JavaScript

$('#resize-hidden').click(function(e) {
  if ($('#column1').hasClass('col-xs-4')) {
    $('#column1').switchClass('col-xs-4', 'hidden-xs');
    $('#column2').switchClass('col-xs-8', 'col-xs-12');
  } else {
    $('#column2').switchClass('col-xs-12', 'col-xs-8');
    $('#column1').switchClass('hidden-xs', 'col-xs-4');
	}
});

$('#resize-col-0').click(function(e) {
  if ($('#column3').hasClass('col-xs-4')) {
    $('#column3').switchClass('col-xs-4', 'col-0');
    $('#column4').switchClass('col-xs-8', 'col-xs-12');
  } else {
    $('#column4').switchClass('col-xs-12', 'col-xs-8');
    $('#column3').switchClass('col-0', 'col-xs-4');
	}
});