<div class="example"></div>
.example {
width: 300px;
height: 50px;
background: yellow;
cursor: pointer;
position: relative;
margin: 50px auto;
}
.example:before {
content: '';
display: block;
width: 0;
height: 5px;
background: red;
position: absolute;
left: 0;
bottom: 0;
transition: .5s;
}
.example:hover:before {
width: 100%;
}
var unsortedObject = {
"Pepper": "Перец",
"Dill": "Укроп",
"Tomato": "Томат"
};
var sortedObject = sortObject(unsortedObject);
function sortObject(obj) {
var keys = Object.keys(obj);
var result = {};
keys.sort();
for(var i = 0; i<keys.length; i++) {
result[keys[i]] = obj[keys[i]];
}
return result;
}
var collection = [
{
key: "Pepper",
value: "Перец"
},
{
key: "Dill",
value: "Укроп"
},
{
key: "Tomato",
value: "Томат"
}
]
collection.sort( sortFunction);
function sortFunction(a,b) {
if (a.key > b.key) {
return 1;
}
if (a.key < b.key) {
return -1;
}
// a должно быть равным b
return 0;
}
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-4">
<p>Block #1</p>
</div>
<div class="col-xs-12 col-sm-6 col-md-4">
<p>Block #2</p>
</div>
<div class="col-xs-12 col-sm-6 col-md-4">
<p>Block #3</p>
</div>
<div class="col-xs-12 col-sm-6 col-md-4">
<p>Block #4</p>
</div>
<div class="col-xs-12 col-sm-6 col-md-4">
<p>Block #5</p>
</div>
<div class="col-xs-12 col-sm-6 col-md-4">
<p>Block #6</p>
</div>
</div>
</div>
Как поступить? контента он генерирует не слабо (судя по яндекс картинкам)