<div class="title">
  <h2>Sortable Vertical Timeline</h2>
  <h4><b>How use</b>: Drag and drop any object in timeline and feel the experience :)</h4>
</div>

<div class="Timeline" id="Timeline">
	<div class="Timeline-line">
		<div class="Timeline-line-menu"></div>
	</div>
	
	<div class="Timeline-item">
		<div class="Timeline-item-inner">
			<div class="Timeline-item-index"></div>
			<div class="Timeline-item-top">
				<div class="Timeline-item-top-type">
					<i></i> <span>Item</span>				
				</div>

			</div>
			<div class="Timeline-item-content">
				<div class="Timeline-item-content-title">
					Lorem ipsum dolor sit amet, consectetur adipisicing.
				</div>
				<div class="Timeline-item-content-body"></div>
			</div>

		</div>
	</div>

	<div class="Timeline-item Timeline-item--quote">
		<div class="Timeline-item-inner">
			<div class="Timeline-item-index"></div>
			<div class="Timeline-item-top">
				<div class="Timeline-item-top-type">
					<i></i> <span>Quote</span>				
				</div>

			</div>
			<div class="Timeline-item-content">
				<div class="Timeline-item-content-title">
					<blockquote>
					  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
					</blockquote>
				</div>
				<div class="Timeline-item-content-body"></div>
			</div>

		</div>
	</div>

	<div class="Timeline-item Timeline-item--image">
		<div class="Timeline-item-inner">
			<div class="Timeline-item-index"></div>
			<div class="Timeline-item-top">
				<div class="Timeline-item-top-type">
					<i></i> <span>Image</span>				
				</div>

			</div>
			<div class="Timeline-item-content">
				<div class="Timeline-item-content-title">
					Lorem ipsum dolor sit amet, consectetur adipisicing.
				</div>
				<div class="Timeline-item-content-body">
					<img src="http://fakeimg.pl/350x200/ddd/FFF/?text=Hola">
				</div>
			</div>

		</div>
	</div>

	<div class="Timeline-item">
		<div class="Timeline-item-inner">
			<div class="Timeline-item-index"></div>
			<div class="Timeline-item-top">
				<div class="Timeline-item-top-type">
					<i></i> <span>Video</span>				
				</div>

			</div>
			<div class="Timeline-item-content">
				<div class="Timeline-item-content-body">
					<iframe src="//player.vimeo.com/video/112719694?title=0&byline=0&portrait=0" width="100%" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
				</div>
			</div>

		</div>
	</div>

	<div class="Timeline-item">
		<div class="Timeline-item-inner">
			<div class="Timeline-item-index"></div>
			<div class="Timeline-item-top">
				<div class="Timeline-item-top-type">
					<i></i> <span>Item</span>				
				</div>

			</div>
			<div class="Timeline-item-content">
				<div class="Timeline-item-content-title">
					Lorem ipsum dolor sit amet, consectetur adipisicing.
				</div>
				<div class="Timeline-item-content-body"></div>
			</div>

		</div>
	</div>

	<div class="Timeline-item Timeline-item--quote">
		<div class="Timeline-item-inner">
			<div class="Timeline-item-index"></div>
			<div class="Timeline-item-top">
				<div class="Timeline-item-top-type">
					<i></i> <span>Quote</span>				
				</div>

			</div>
			<div class="Timeline-item-content">
				<div class="Timeline-item-content-title">
					<blockquote>
					  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum inventore quas deserunt, reprehenderit est doloribus praesentium minima sequi repudiandae libero!</p>
					</blockquote>
				</div>
				<div class="Timeline-item-content-body"></div>
			</div>

		</div>
	</div>

	<div class="Timeline-item">
		<div class="Timeline-item-inner">
			<div class="Timeline-item-index"></div>
			<div class="Timeline-item-top">
				<div class="Timeline-item-top-type">
					<i></i> <span>Item</span>				
				</div>

			</div>
			<div class="Timeline-item-content">
				<div class="Timeline-item-content-title">
					Lorem ipsum dolor sit amet, consectetur adipisicing.
				</div>
				<div class="Timeline-item-content-body"></div>
			</div>

		</div>
	</div>

	<div class="Timeline-item">
		<div class="Timeline-item-inner">
			<div class="Timeline-item-index"></div>
			<div class="Timeline-item-top">
				<div class="Timeline-item-top-type">
					<i></i> <span>Item</span>				
				</div>

			</div>
			<div class="Timeline-item-content">
				<div class="Timeline-item-content-title">
					Lorem ipsum dolor sit amet, consectetur adipisicing.
				</div>
				<div class="Timeline-item-content-body"></div>
			</div>

		</div>
	</div>

	<div class="Timeline-item Timeline-item--image">
		<div class="Timeline-item-inner">
			<div class="Timeline-item-index"></div>
			<div class="Timeline-item-top">
				<div class="Timeline-item-top-type">
					<i></i> <span>Image</span>				
				</div>

			</div>
			<div class="Timeline-item-content">
				<div class="Timeline-item-content-title">
					Lorem ipsum dolor sit amet, consectetur adipisicing.
				</div>
				<div class="Timeline-item-content-body">
					<img src="http://fakeimg.pl/350x100/ddd/FFF/?text=Chao">
				</div>
			</div>

		</div>
	</div>

		<div class="Timeline-item Timeline-item--image">
		<div class="Timeline-item-inner">
			<div class="Timeline-item-index"></div>
			<div class="Timeline-item-top">
				<div class="Timeline-item-top-type">
					<i></i> <span>Image</span>				
				</div>

			</div>
			<div class="Timeline-item-content">
				<div class="Timeline-item-content-title">
					Lorem ipsum dolor sit amet, consectetur adipisicing.
				</div>
				<div class="Timeline-item-content-body">
					<img src="http://placekitten.com/350/208">
				</div>
			</div>

		</div>
	</div>

</div>
@import "bourbon";

/*--------------------------------------------

Name:     Timeline
Created:  13/02/15
Author:   Raúl Hernández <raulghm@gmail.com>
Github:   raulghm

----------------------------------------------*/

/*
Using BEM SuitCSS variant, see: https://github.com/suitcss/suit/blob/master/doc/naming-conventions.md
*/

$brand-primary: #999;
$gray-darker: lighten(#000, 46.5%); // #777
$gray-dark: lighten(#000, 60.5%);   // #999
$gray: lighten(#000, 79%); // #c9c9c9
$gray-light: lighten(#000, 87%); // #dedede
$gray-lighter: lighten(#000, 92%); // #ebebeb
$font-family-sans-serif: Helvetica, Arial, sans-serif;
$font-family-serif: Georgia, "Times New Roman", Times, serif;

// font-size helper
@mixin font-size($size) {
	// html font-size is 62.5% (base 10)
  font-size: ($size * 10) + px; // fallback in px
  font-size: $size + rem;
}

.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf {
    *zoom: 1;
}

body {
  padding: 40px;
}

.title {
  text-align: center;
  margin-bottom: 60px;
  color: #777;
  
  h2, h4 {
    font-family: $font-family-serif;
  }
}

$component: 'Timeline';

.#{$component} {
	width: 830px;
	margin: 0 auto;
	position: relative;	

	&-line {
		width: 40px;
		height: 100%;
		position: absolute;
		left: 50%;
		margin-left: -20px;
		padding-left: 20px;
		cursor: pointer;

		&:after {
			content: "";
			position: absolute;			
			border-left: 1px solid $gray-light;
			height: 100%;
		}

		&.is-active {
			.#{$component} {
				&-line {
					&-menu {
						opacity: 1;
					}
				}
			}
		}		
	}

	&.is-dragging {
		.#{$component} {
			&-item {
				&-inner {
					margin: 0;
					opacity: .7;
				}
			}
		}
	}

  &-item {
  	width: 100%;
  	position: relative;
  	@extend .cf;
  	z-index: 90;

  	&-inner {
  		position: relative;
	  	margin-bottom: 40px;
	  	width: 345px;
	  	border: 1px solid $gray-light;
	  	transition: all .3s ease;
	  	margin: -10px 0 -20px;

	  	&:before {
	  		content: "";
	  		position: absolute;
	  		top: 50%;
	  		right: -78px;
	  		border-radius: 50%;
	  		transform: translateY(-50%);
	  		background-color: $brand-primary;
	  		width: 12px;
	  		height: 12px;
	  	}

	  	// triangle right
	  	&:after {
	  		content: "";
	  		width: 20px;
	  		height: 20px;
	  		position: absolute;
	  		right: -9px;
	  		top: 50%;
	  		@include triangle(16px, $gray-light, right);
	  		transform: translateY(-50%);
	  		transition: all .2s ease;
	  	}
  	}

  	&:hover {
  		user-select: none;
  		-webkit-user-select: none;

  		&:after {
  			border-left-color: $brand-primary;
  		}

  		.#{$component} {
  			&-item {
  				&-inner {
  					border-color: $brand-primary;

  					&:after {
  						@include triangle(16px, $brand-primary, right);
  					}
  				}

  				&-top {
  					&-tools {
  						opacity: 1;
  					}
  				}
  			}
  		}
  	}
		
  	&:nth-child(odd) {
  		margin-left: 50%;
  		padding-left: 70px;
      width: 50%;

  		&:hover {
  			.#{$component} {
	  			&-item {
	  				&-inner {
	  					&:after {
	  						@include triangle(16px, $brand-primary, left);
	  					}
	  				}
	  			}
	  		}
  		}

  		.#{$component} {
  			&-item {
  				&-inner {
  					&:before {
  						right: auto;
  						left: -77px;
  					}

  					&:after {
			  			@include triangle(16px, $gray, left);
			  			border-left: 0;
			  			right: auto;
			  			left: -9px;
			  		}
  				}

  				&-index {
  					opacity: .6;
  					left: -45px;
  					right: auto;
  				}
  			}
  		}

  	}

  	&.is-dropping {
			cursor: -webkit-grabbing;
  	}

  	&-index {
  		position: absolute;
  		right: -45px;
  		top: 50%;
  		transform: translateY(-50%);
  		color: $gray;
  		@include font-size(2.4);
  		font-weight: 200;
  		font-family: $font-family-serif;
  	}

		&--quote {
			.#{$component} {
				&-item {
					&-content {
						font-family: $font-family-serif;
					}					
				}
			}
		}

		&--image {
			.#{$component} {
				&-item {
					&-content {
						&-body {
							img {
								max-width: 100%;
								margin-top: 5px;
							}
						}
					}
				}
			}
		}

  	&-top {
  		background-color: #f8f8f8;
  		padding: 10px 15px;
  		@extend .cf;

  		&:hover {
  			cursor: move;
  			cursor: -webkit-grab;
  		}

  		&-type {
  			float: left;
  			text-transform: uppercase;
  			letter-spacing: 1px;
  			@include font-size(1.1);

  			i {
  				@include font-size(1.6);
  			}

  			span {
  				margin-left: 10px;
  			}
  		}

  	}

  	&-content {
	 		background-color: #fff;
	 		padding: 10px 20px 20px;
	 		text-align: left;

	 		&-title {
	 			@include font-size(1.8);
	 		}

	 		&-image {
	 			background-size: cover;
	 			background-position: 50%;
	 			background-repeat: no-repeat;
	 			height: 135px;
	 			width: 341px;
	 			margin-top: 10px;
	 			margin-left: -20px;
	 		}

	 		&-body {
	 			position: relative;	 	

	 			&:empty {
	 				display: none;
	 			}				
 			}
	 	}
  }

}

View Compiled
/* Sortable — is a minimalist JavaScript library for reorderable drag-and-drop lists on modern browsers and touch devices. No jQuery. Supports Meteor, AngularJS, React and any CSS library, e.g. Bootstrap.
https://github.com/RubaXa/Sortable */

var $component = 'Timeline';

	function sort() {
		var $itemIndex = 0;

		console.log('reorder');
		
		$('.' + $component).find('.' + $component + '-item').each(function(index) {

			index++;
			$itemIndex = (index < 10) ? '0' + index : index;
			
			$(this).find('.' + $component + '-item-index').text($itemIndex);

			if (index % 2 === 0) {
        $(this).addClass('is-right');
      }
      else {
        $(this).removeClass('is-right');
      }

		});
	}

	$(document).ready(function(){
						 sort();

	 	var el = document.getElementById($component);
      var sortable = Sortable.create(el, {
        draggable: '.' + $component + "-item", 
        handle: '.' + $component + "-item-top",
        animation: 250,
        scroll: true, // or HTMLElement
        scrollSensitivity: 60, // px, how near the mouse must be to an edge to start scrolling.
        scrollSpeed: 10, // px
        ghostClass: "is-dropping",

        onStart: function (event) {
          $('.' + $component).toggleClass('is-dragging');
          console.log('onStart')
        },

        onEnd: function (event) {
          $('.' + $component).toggleClass('is-dragging');
          sort();
        },

      });
	});

External CSS

  1. //maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
  2. https://rubaxa.github.io/Sortable/Sortable.js