Bootstrap columns in flexbox not wrapping on smaller screens

Question

I have a section of my website that I am using the CSS below on 2 divs, and one a tag in order to have the content vertically aligned in the center.

The problem is that with the flex style properties, when the window is < 768px ideally the content would change layout and each col-md-4 would stack on top of one another.

This is not happening, instead the columns just become really skinny and are displayed still side by side. Is there any way to fix this? Preferably trying to stay away from table-cell formatting

.about-us-nav {
    display: flex;
    align-items: center;
    justify-content: center;
}

.about-us-nav a {
    font-size: 20px;
    color: #52361D;
    background-color: #885A31;
    border-color: #52361D;
    width: 200px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.how-help-container {
    margin-top: -25px;
    display: flex;
    align-items: center;
    justify-content: center;
    position:absolute;
    z-index: 2;
}

This article really helped me to understand flexbox when I first used it on a project: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ — David Alsbright, Oct 13 '15 at 00:47
In Bootstrap 4 you can use the class "flex-wrap" to achieve the same thing as manually writing the flexbox css yourself. — wattry, Nov 07 '18 at 15:17

score 8 · Accepted Answer · edited May 23 '17 at 12:33

There are two things you should consider:

When you apply display: flex to an element it becomes a flex container which comes with several default styles.

One of the defaults is flex-direction: row, which aligns flex items (child elements) along the horizontal axis. To switch to a vertical direction you need to specify flex-direction: column.

Another default is flex-wrap: nowrap, which forces flex items to remain on a single line (even if they overflow the container).

From your question:

The problem is that with the flex style properties, when the window is <768px ideally the content would change layout and each col-md-4 would stack on top of one another. This is not happening, instead the columns just become really skinny and are displayed still side by side.

It sounds like the flex items are not wrapping. Try adding this to the flex container:
```
flex-wrap: wrap;
```
If you want the flex items to stack vertically when the window is < 768px, use a media query with the flex-direction property.
```
@media screen and (max-width: 768px) { .your-selector-here {flex-direction: column;} }
```

Note on browser support:

Flexbox is supported by all major browsers, except IE < 10. Some recent browser versions, such as Safari 8 and IE10, require vendor prefixes. For a quick way to add prefixes use Autoprefixer. More details in this answer.

Bootstrap columns in flexbox not wrapping on smaller screens

1 Answers1

Linked