Radioactive,
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo</title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<style type='text/css'>
ul{list-style:none;margin:0;padding:0;}
ul li{text-align:center;}
ul:nth-child(1){width:100%;max-width:102px;float:left;}
ul:nth-child(2){display:table-cell;padding:0 5px;width:316px;}
ul:nth-child(1) li{border:1px solid #ddd;width:80px;padding:5px 10px;background-color:#CC9B00;border-radius:4px;margin:5px 0;cursor:pointer;font:.9em/normal sans-serif;}
ul:nth-child(2) li{height:70px;width:70px;border:1px solid #ddd;display:inline-block;background-color:#9CB7F1;line-height:70px;margin: 4px 2px;}
</style>
<script>
$(function () {
$("#listbutcity").on("click", "li", function (a) {
var cls = '.'+$(this).data('name'),
city = $('#listcity'), li = $(cls,city);
city.prepend(li)
});
})
</script>
</head>
<body>
<ul id="listbutcity">
<li data-name="ufa">Уфа</li>
<li data-name="Moskov">Москва</li>
<li data-name="bratsk">Братск</li>
</ul>
<ul id="listcity">
<li class="Moskov">Moskov</li>
<li class="ufa">ufa</li>
<li class="bratsk">bratsk</li>
<li class="Moskov">Moskov</li>
<li class="bratsk">bratsk</li>
<li class="ufa">ufa</li>
<li class="Moskov">Moskov</li>
</ul>
</body>
</html>