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 является лучшим способом для достижения. Вы можете использовать классы .visible- * и .hidden- * в соответствии с требуемыми точками обзора просмотра.

Answer 2

.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