CODEWITHSUNDEEP
htmltwitter-bootstrapbootstrap-4flexbox
Tian Reagon
Tian Reagon

Reputation: 118

How do I only apply flex-wrap on the md breakpoint?

I've been looking around and can't seem to figure this out. I am using Bootstrap 4 and have a flex container with 8 div elements. I want there to be no wrap from md screens up, but once the screen size go below that I need it to wrap.

I have tried adding flex-md-wrap but that has the opposite effect, naturally I then tried flex-md-nowrap but that had no effect.

Here is my code:

<div class="container">
  <div class="d-flex flex-row flex-md-wrap">
    <div class="p-2"><img src="#" alt=""></div>

       <!-- 6 divs with images in -->

    <div class="p-2"><img src="#" alt=""></div>
  </div>
</div>

Upvotes: 2

Views: 4725

Answers (1)

Carol Skelly
Carol Skelly

Reputation: 362690

Since md implies medium and up, you would do this..

<div class="d-flex flex-wrap flex-md-nowrap">
..
</div>

https://www.codeply.com/go/A5NmQR1GTH

Upvotes: 9

Related Questions