html - フレックスボックスの複数行。使い方: flex-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

  .section-items-container
    display: flex
    justify-content: flex-start
    align-items: stretch  
    // flex-flow: row wrap
    flex-wrap: wrap
    @include respond-to(small)
      flex-direction: column   
    @include respond-to(medium)
      flex-direction: row
    .item   
      border: $border  
      flex-grow: 1
      flex-shrink: 0
      @include respond-to(small)
        flex-basis: 100%
      @include respond-to(medium)
        flex-basis: 50%
        &:nth-child(4)  
          order: 5
      @include respond-to(wide-screens)
        &:nth-child(1),
        &:nth-child(2),  
        &:nth-child(3)      
          flex-basis: 33%
        &:nth-child(4),  
        &:nth-child(5)  
          flex-basis: 50%
        &:nth-child(4)  
          order: 4