-2

I'm trying to put the H2 above the H4.

debug picture

Pierre
  • 1,129
  • 2
  • 16
  • 30
Gundam_code
  • 13
  • 3
  • Weclome. You need to paste the text of the code here. – s.kuznetsov Jan 20 '21 at 17:17
  • can you please show the code? – Pranav Jan 20 '21 at 17:17
  • Take a look at [`flex-direction`](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction). That said, please read our [tour] to get a better understanding about how to add a [mre]. – 0stone0 Jan 20 '21 at 17:17
  • Hello, and welcome to [Stackoverflow](https://stackoverflow.com)! You might want to take the [tour](https://stackoverflow.com/tour), and [how to ask a good question](https://stackoverflow.com/help/how-to-ask). We also do not post images of the code, instead we paste the code in the question. – YT_Xaos Jan 20 '21 at 17:21

3 Answers3

0

Try to add this:

.mission {
  /* ... */
  flex-direction: column;
}
Pierre
  • 1,129
  • 2
  • 16
  • 30
0

Explanation

Flexbox modal is unidirectional. When you define the parent element as flex, the direct children follow the main-axis or cross-axis as per the flex-direction. Therefore float, clear, vertical-align and display properties have no effect on flex items.

Solution

Add flex-direction to column as you want the content flow from top-to-bottom

.mission {
  flex-direction: column;
}
Shashikant Yadav - Kantbtrue
  • 808
  • 6
  • 12
0

you can use display: block;

h2, h3 {
 display: block;
}

or you can use flex

<div class="box">
  <h2>test</h2>
  <h3>test</h3>  
</div>

.box {
  flex-direction: column;
 }