grid system in bootstrap - css

Question

I have a scenario where I need the following view in large resolution:
and the following in small and medium resolution:
I have tried:
<div class="row">
<div class="img-blocks small-image col-lg-2 clearfix">
<ul class="list-style">
<li ng-repeat="img in productImgSrc track by $index">
<img ng-src={{img}} alt="...">
</li>
</ul>
</div>
<div class="img-blocks zoomed-image col-lg-10 clearfix">
<img ng-src={{productImgSrc[0]}} alt="...">
</div>
</div>
But it's not able to make generate the view for the smaller resolution.
Any help would be appreciated.

Answer 1

You can use CSS Flexbox. And use media queries to reverse the order on different screen sizes.
In my example,
Small: max-width: 991px (0px - 991px)
Large: min-width: 992px (992px > infinite)
Have a look at my snippet below (For large screens use Full Screen mode):
.main-block {
display: flex;
align-items: center;
justify-content: center;
}
.list-style {
list-style: none;
padding: 0;
display: flex;
flex-direction: column;
}
.list-style li {
padding: 10px 10px 0 0;
}
/* For Small Screens */
#media screen and (max-width: 991px) {
.main-block {
display: flex;
flex-direction: column-reverse;
}
.list-style {
flex-direction: row;
}
.list-style li {
padding: 10px;
}
}
<div class="row main-block">
<div class="img-blocks small-image col-lg-2 clearfix">
<ul class="list-style">
<li>
<img src="http://placehold.it/40x40" alt="...">
</li>
<li>
<img src="http://placehold.it/40x40" alt="...">
</li>
<li>
<img src="http://placehold.it/40x40" alt="...">
</li>
<li>
<img src="http://placehold.it/40x40" alt="...">
</li>
<li>
<img src="http://placehold.it/40x40" alt="...">
</li>
</ul>
</div>
<div class="img-blocks zoomed-image col-lg-10 clearfix">
<img src="http://placehold.it/400x300" alt="...">
</div>
</div>
Hope this helps!