引导程序中的网格系统

Question

我有一个场景，我需要以下大分辨率视图：

以及以下中小分辨率：

我试过了：

<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>

但它无法生成较小分辨率的视图。

任何帮助将不胜感激。

Answer 1

您可以使用 CSS Flexbox。并使用媒体查询来反转不同屏幕尺寸的顺序。

在我的例子中，

• 小号：max-width: 991px (0px - 991px)
• 大号：min-width: 992px (992px > infinite)

看看我下面的 sn-p（对于大屏幕使用全屏模式）：

.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>

希望这会有所帮助！