Shikha thakur Shikha thakur - 22 days ago 11
AngularJS Question

grid system in bootstrap

I have a scenario where I need the following view in large resolution: enter image description here

and the following in small and medium resolution: enter image description here

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

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!