flexbox order but start at new line?

Question

I have this html and css. How do I push Menu A content to new line? below the titles?

.root {
  display: flex;
}

.content {
  order: 2;
}

<div class="root">
  <div class="title">Menu A</div>
  <div class="content">Menu A content</div>

  <div class="title">Menu B</div>
</div>

score 2 · Answer 1 · answered Apr 19 '18 at 04:09

.root {
  display: flex;
  display: -webkit-flex; 
  -webkit-flex-wrap: wrap; 
  flex-wrap: wrap;
}

.content {
  order:2;
  width:100%
}

<div class="root">
  <div class="title">Menu A</div>
  <div class="content">Menu A content</div>
  <div class="title">Menu B</div>
</div>

score 1 · Accepted Answer · answered Apr 19 '18 at 04:31

You can try this

.root {
  display: flex;
  flex-direction: column;  /* Add this */
}

.content {
  order: 2;
}

<div class="root">
  <div class="title">Menu A</div>
  <div class="content">Menu A content</div>

  <div class="title">Menu B</div>
</div>

Or try this

.root {
  display: flex;
  flex-direction: column; /* Add this */
  flex-flow: wrap;  /* Add this */
}

.content {
  order: 2;
  width: 100%;
}

<div class="root">
  <div class="title">Menu A</div>
  <div class="content">Menu A content</div>

  <div class="title">Menu B</div>
</div>

score 0 · Answer 3 · answered Apr 19 '18 at 06:38

0

try this:

.root {
  display: flex;
  flex-wrap: wrap;
}
.root div{
  width: 100%;
}

<div class="root">
  <div class="title">Menu A</div>
  <div class="content">Menu A content</div>

  <div class="title">Menu B</div>
</div>

answered Apr 19 '18 at 06:38

HTML CSS Hupp Technologies

335
1
6

Dhaval Jardosh · Answer 4 · 2018-04-19T04:02:08.367

-1

You need to adjust your class in the following way.

.root
  .sub-root
    .title
    .content
  .sub-root
    .title
 and so on....

As you are using Flex.

Your sub-root will be adjacent to each other, and your content will be on the next line.

And by correct way, I meant fixing your HTML. :)

.root {
  display: flex;
}

<div class="root">
  <div class="sub-root">
    <div class="title">Menu A</div>
    <div class="content">Menu A content</div>
  </div>
  <div class="sub-root">
    <div class="title">Menu B</div>
  </div>
</div>

edited Apr 19 '18 at 04:02

answered Apr 19 '18 at 03:56

Dhaval Jardosh

7,151
5
27
69

I'm sorry, what? In what way is the existing HTML not "correct"? (I suspect there is a valid underlying point here that's being clouded by *extremely* poor writing.) – BoltClock Apr 19 '18 at 03:57

flexbox order but start at new line?

4 Answers4