-1

I am trying to flex items within a container when the browser shrinks. In the example, they all wrap like they are supposed to except when it wraps, I want it to wrap with div 3 going right under div 2 instead of wrapping under div one. I am not sure how to wrap directly underneath div 2.

.Flex{
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  flex: 0 0 243px;
}
   

.InnerFlex{
  background: blue;
  width: 242px;
  color: white;
}

.InnerFlex p{
  height: 100px;
}
<div class="Flex">
  <div class="InnerFlex">
    <p>1st</p>
    <p>1stmore</p>
  </div>
  <div class="InnerFlex">
    2nd
  </div>
  <div class="InnerFlex">
    3rd
  </div>
</div>

https://jsfiddle.net/1armuot9/

italant
  • 187
  • 1
  • 12
Keith
  • 4,059
  • 2
  • 32
  • 56

1 Answers1

-1

3div does not fit, so it is moved to a new line. 2div fits, so it stays in place.

Use media queries to add "flex-direction: column;" at the right moment

italant
  • 187
  • 1
  • 12