подвесная система в загрузчике

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. И используйте медиа-запросы, чтобы изменить порядок на разных размерах экрана.

В моем примере,

• Small: max-width: 991px (0px - 991px)
• Large: min-width: 992px (992px > infinite)

Посмотрите на мой сниппет ниже (Для больших экранов используют Полноэкранный режим):

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

Надеюсь, это поможет!