<p class="info">Resize window<p>

<ul class="order" id="order">
  <li class="order-item" data-sm="5" data-md="2"><a>Item1</a></li>
	<li class="order-item" data-sm="6" data-md="1"><a>Item2</a></li>
	<li class="order-item" data-sm="2" data-md="3"><a>Item3</a></li>
	<li class="order-item" data-sm="4" data-md="4"><a>Item4</a></li>
	<li class="order-item" data-sm="3" data-md="5"><a>Item5</a></li>
	<li class="order-item" data-md="6"><a>Item6</a></li>
</ul>

<ul class="order" id="order1">
  <li class="sortable" data-lg="6" data-sm="5" data-md="2"><a>Item1</a></li>
	<li class="sortable" data-lg="5" data-sm="6" data-md="1"><a>Item2</a></li>
	<li class="sortable" data-lg="4" data-sm="2" data-md="3"><a>Item3</a></li>
	<li class="sortable" data-lg="3" data-sm="4" data-md="4"><a>Item4</a></li>
	<li class="sortable" data-lg="2" data-sm="3" data-md="5"><a>Item5</a></li>
	<li class="sortable" data-lg="1" data-sm="7" data-md="6"><a>Item6</a></li>
</ul>
* {
	margin: 0;
	padding: 0;
}

.info {
	font-size: 20px;
	text-align: center;
	margin: 20px;
}

#order{
	margin-bottom: 20px;}

.order,#order-list{
	list-style: none;
	background-color: #1d1f20;
	&:after{
		content: "";
		clear: both;
		display: block;
	}
	.order-item, .sortable{
		float: left;
		list-style-type: none;
		a{
			display: block;
			padding: 10px;
			font-family: monospace;
			font-size: 18px;
			color: #96b38a;
		}
	}
}

#order-list{
	li.order-item{
		a{
			color: #ddca7e;
		}
	}
}
View Compiled
"use strict";

(function ($) {
	$.fn.order = function (_params) {
		const $order = this;
		const params = $.extend(
			{
				orderItems: ".order-item",
				responsiveBreakpoints: [
					{
						selector: "lg",
						breakpoint: 1024
					},
					{
						selector: "md",
						breakpoint: 768
					},
					{
						selector: "sm",
						breakpoint: 667
					}
				]
			},
			_params
		);

		const $orderItem = this.find(params.orderItems);
		let screenWidth = $(window).width();

		const sortedBreakPoint = params.responsiveBreakpoints.sort(function (a, b) {
			return a.breakpoint > b.breakpoint ? 1 : -1;
		});

		let breakpointSelector =
			sortedBreakPoint[sortedBreakPoint.length - 1].selector;

		const coreFunction = function () {
			screenWidth = $(window).width();
			$.each(sortedBreakPoint, function (index, item) {
				if (screenWidth <= item.breakpoint) {
					breakpointSelector = item.selector;
					return false;
				}
			});

			$orderItem
				.sort(function (a, b) {
					return $(b).data(breakpointSelector) < $(a).data(breakpointSelector)
						? 1
						: -1;
				})
				.appendTo($order);
		};

		$(window).on("resize", function () {
			coreFunction();
		});

		coreFunction();

		return $order;
	};
})(jQuery);

// Examples

$(document).ready(function () {
	// Example 1
	$("#order").order();

	// Example 2
	$("#order1").order({
		orderItems: ".sortable",
		responsiveBreakpoints: [
			{
				selector: "lg",
				breakpoint: 1024
			},
			{
				selector: "md",
				breakpoint: 768
			},
			{
				selector: "sm",
				breakpoint: 667
			}
		]
	});
});
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js