twitter-bootstrapbootstrap-4

Breaking points in a flex-row

If a surrounding div is a flex-row in Bootstrap 4+, and it has several child divs:

<div class="d-flex flex-row">
  <div class="some-class">Item 1</div>
  <div class="some-class">Item 2</div>
  <div class="some-class">Item 3</div>
</div>

Then, how to style these divs so that child divs are completely expanded on small, mobile screens, while preserving the parent's d-flex flex-row classes? Currently, they are not expanded on small layouts and the three columns are preserved.

Solution

  • Use direction utilities with responsive variations. For example, use column direction first, and on bigger screens change to row by adding flex-column flex-sm-row:

    <div class="d-flex flex-column flex-sm-row">
  <div class="some-class">Item 1</div>
  <div class="some-class">Item 2</div>
  <div class="some-class">Item 3</div>
</div>