CODEWITHSUNDEEP
bootstrap-4
Luke Galea
Luke Galea

Reputation: 308

Boostrap Flex: What is the difference between row and flex-row, flex-sm-row, etc

I understand the concept of flex sm, md, lg columns but not when applied to rows. What does flex row do? and what do the sizes sm, md, lg mean when applied to a flex row?

Upvotes: 4

Views: 8507

Answers (1)

Carol Skelly
Carol Skelly

Reputation: 362660

Short Answer - .row is only a container for grid col. However, flex-row, flex-column, etc.. can be used for any flexbox elements (not just the grid rows and columns).

Long Answer

The flexbox direction utility classes can be used to responsively change the direction of flexbox children (regardless of the children being grid columns or other content). There are 4 flexbox directions: row, row-reverse, column and column-reverse

For example, a flexbox parent <div> that contains 4 child <span> elements. You can make the children column direction on xs, row direction on sm and up:

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

Of course they can also be used to override the default flex row direction of the grid .row. For example, reverse the column order on lg and up:

<div class="row flex-lg-row-reverse">
    <div class="col-sm-4">1</div>
    <div class="col-sm-4">2</div>
    <div class="col-sm-4">3</div>
</div>

Demo: https://www.codeply.com/go/sSgebPyncz

Another way to look at it:

These classes are used to responsively control column width:
col-12, col-lg-4, col-md-5, etc...

These classes are used to responsively control flexbox direction:
flex-row, flex-column, flex-md-row-reverse, etc...

Upvotes: 6

Related Questions