html - Flex-box 多行。如何使用: flex-wrap: wrap?

Question

我必须这样做。适用于宽屏、中屏和小屏 https://pp.vk.me/c629328/v629328337/21bd7/izp9QG8Qcg4.jpg

这是我的代码

.section-items-container
  display: flex
  justify-content: flex-start
  align-items: stretch  
  flex-flow: row wrap
  @include respond-to(small)
  flex-direction: column   
  @include respond-to(medium)
  flex-direction: row
.item   
  flex-grow: 1  
  @include respond-to(small)
    &:nth-child(4)
      order: 5
  @include respond-to(medium)
    &:nth-child(4)  
      flex-grow: 3

Answer 1

Bootstrap responsive-utilities是最好的实现方式。您可以根据需要的视口(viewport)断点使用 .visible-* 和 .hidden-* 类。