CodePen

HTML

            
              <div id="swiper" class="swipe">
        <div>
        <div class="grid-1-4 portfolio-piece">
          <div class="front">
            <img src="http://placehold.it/420x226">
          </div>
          <div class="back">
            <p>Small Description About the Project</p>
            <button>View Project</button>
            <button>View Live Site</button>
          </div>
        </div>
        <div class="grid-1-4 portfolio-piece pushed">
          <div class="front">
            <img src="http://placehold.it/420x226">
          </div>
          <div class="back">
            <p>Small Description About the Project</p>
            <button>View Project</button>
            <button>View Live Site</button>
          </div>
        </div>
        <div class="grid-1-4 portfolio-piece pushed">
          <div class="front">
            <img src="http://placehold.it/420x226">
          </div>
          <div class="back">
            <p>Small Description About the Project</p>
            <button>View Project</button>
            <button>View Live Site</button>
          </div>
        </div>
        <div class="grid-1-4 portfolio-piece">
          <div class="front">
            <img src="http://placehold.it/420x226">
          </div>
          <div class="back">
            <p>Small Description About the Project</p>
            <button>View Project</button>
            <button>View Live Site</button>
          </div>
        </div> 
      </div> <!-- END SWIPER -->
      </div> <!-- END SWIPER -->
            
          
!
via HTML Inspector

CSS

            
              .back { display: none; }
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
// Jquery Breakpoints
var delay = (function(){
    var timer = 0;
    return function(callback, ms){
        clearTimeout (timer);
        timer = setTimeout(callback, ms);
    };
})();

$(function() {

    var pause = 100; // will only process code within delay(function() { ... }) every 100ms.

    $(window).resize(function() {
        
        delay(function() {
        
            var width = $(window).width();
    
            if( width >= 768 && width <= 959 ) {
                // code for tablet view
            } else if( width >= 480 && width <= 767 ) {
               
            } else if( width <= 479 ) {
                window.mySwipe = new Swipe(document.getElementById('swiper'), {
    		    startSlide: 2,
				    speed: 400,
				    auto: 3000,
				});
            }
        
        }, pause );
    
    });
    
    $(window).resize();

});




            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................