JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div class="container">
   <div class="row" id="carousel">
      <div class="col-md-6">
         <img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQMShYhHyy6iUoFBfhoBwggU-srcnQ6LRR2hVOsgyUBfJscrKBXUg"/>
      </div>
      <div class="col-md-6">
         <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSQ1SGBVDrea0npGpjfu5zxkVnTVcE68g4UY0k4lNG8uQ7VWQB0"/>
      </div>
       <div class="col-md-6">
         <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSQ1SGBVDrea0npGpjfu5zxkVnTVcE68g4UY0k4lNG8uQ7VWQB0"/>
      </div>
       <div class="col-md-6">
         <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSQ1SGBVDrea0npGpjfu5zxkVnTVcE68g4UY0k4lNG8uQ7VWQB0"/>
      </div>
       <div class="col-md-6">
         <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSQ1SGBVDrea0npGpjfu5zxkVnTVcE68g4UY0k4lNG8uQ7VWQB0"/>
      </div>
   </div>
</div>

JavaScript

window.onresize = changeLayout;
function changeLayout(){
    var carousel = document.getElementById('carousel');
    var children = carousel.getElementsByTagName('div');
    var length = children.length;
    var w = window.innerWidth;
    if(w < 600){
        carousel.className = 'carousel-inner';
        for(var i = 0; i < length; i++){
            if(i == 0){
                children[i].className = 'item active';
                continue;
            }
            children[i].className = 'item';
        }
        $('#carousel').carousel({interval:1500});
    }
    else{
        carousel.className = 'row'; 
        for(var i = 0; i < length; i++){
            children[i].className = 'col-md-6';        
        }
    }
}
changeLayout();