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 Weekender: Moon metaphors, procrastinating monks, and a visit to a cheese factory
What we’re reading, watching, and listening to this week ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ...
No comments:
Post a Comment