是否可以覆盖 flex-direction: row？

Question

I have a container that uses flex-direction: row and I would like to keep it that way the only problem is that now I want to put something under a div without having to nest it in.

This is what I have.

And I would like to do something like this:

My main_continer css looks something like this:

main_container {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    border: 1px solid #DDDDDD;
    border-bottom: 1px solid #DDDDDD;
    text-align: left;
.div_2 {
    width: 90%;
 }

Is it possible to override flex direction row some way?

Answer 1

Add the ability for the flex items to wrap:

.main_container {
  // ...rest of styles
  flex-wrap: wrap;
}

Then override the order for that second item, making it come after the fourth item:

.div_2 {
  order: 4; // default is 0, you might need to play with this value
}

Last make sure the items layout 3 across, add some new class to all the items in the flex container so you can target them together:

.new_class_on_all_items {
  width: 33.333%;
}