Product title
Product description... Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. asdfasdfasdfasdfasdfasdfa asdf asdf asdf asdf asdf asdf sdfasd fasdf asdfa sdfas dfasd fasdfasdfasdfsdf asdf asdfasdfasdfasdfa sfa sdfa sdf asd f
$21.000Product title
Product description... Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
$21.000Product title
Product description... Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
$21.000Product title
Product description... Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
$21.000Product title
Product description... Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
$21.000Product title
Product description... Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
$21.000
Bootstrap Flexbox List/Grid Toggle
https://codepen.io/bootstrapped/pen/RRBdbm
.list-grid-demo .glyphicon {
margin-right: 5px;
}
@media only screen and (min-width: 481px) {
.grid-group-wrapper.row {
display: flex;
flex-wrap: wrap;
}
.grid-group-wrapper.row:after,
.grid-group-wrapper.row:before {
display: flex;
}
.grid-group-wrapper.row {
> [class*='col-'] {
display: flex;
flex-direction: column;
}
.thumbnail,
.caption {
display: flex;
flex: 1 0 auto;
flex-direction: column;
}
.caption-text {
flex-grow: 1;
}
img {
width: 100%;
height: auto;
}
.price-buy-spacing {
display: flex;
justify-content: space-between;
}
.price-buy-spacing .lead {
margin-bottom: 0px;
}
.price-buy-spacing {
margin-bottom: 10px;
}
}
.list-group-wrapper {
.item {
float: none;
width: 100%;
}
.item:before,
.item:after {
display: table;
content: " ";
}
.item:after {
clear: both;
}
.item {
.thumbnail img {
margin-right: 10px;
float: left;
}
.caption,
.thumbnail {
display: flex;
}
.caption {
flex-direction: column;
}
.caption-text {
flex-grow: 1;
}
}
}
}
jQuery(document).ready(function($) {
$('#list').click(function(event) {
event.preventDefault();
$('#products').addClass('list-group-wrapper').removeClass('grid-group-wrapper');
});
$('#grid').click(function(event) {
event.preventDefault();
$('#products').removeClass('list-group-wrapper').addClass('grid-group-wrapper');
});
});
Subscribe to:
Post Comments (Atom)
The 6 New Rules of Communicating
The era of teleprompters and talking points has come to an end ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ...
No comments:
Post a Comment