Как расположить третью иконку под первой, а четвертую под второй?

Question

[trubanenkoalex]

HTML:
<div class="finhabits">
    <p class="title_habits" >Улучшение финансовых привычек</p>
    <div class="conteiner">
 <ul class="habits_icon">
    <li class="habits">
    <i class="fas fa-passport"></i>
    </li>
     <li class="habits">
    <i class="fas fa-hand-holding-usd"></i>
    </li>
    <li class="habits">
    <i class="fas fa-plus"></i>
    </li>
</ul>
   </div>
</div>

CSS:

.finhabits{
 
    max-width:500px;
    max-height:400px;
    width: 500px;
    height: 400px;
    border-radius: 1rem;
    margin:1rem;
    background:#232A51;
    position: relative;
    right: 19%;
    }
    .title_habits{
        letter-spacing: 1px;
        font-family: 'Roboto', sans-serif;
        margin:1rem;
        text-align: center;
        color:#FFFFFF;
        font-size: 16px;
        font-weight: 600;
    }
 .conteiner{
    display: flex;
    justify-content: center;
    align-content: space-between;
 
 }
  .habits_icon{

      align-items: center;
    
    list-style: none;
    padding: 0; 
    color:white;
}
  .habits{
      margin: 1rem;
    font-size: 36px;
    border:2px solid #404882;
    width: 120px;
    height: 120px;
    border-radius: 1rem;
    text-align: center;
    line-height: 110px;
  }

Answer 1

[Elena Fire]

Используйте свойство order у flex-контейнера

.habits_icon {
display: flex;
flex-direction: column;
}
li:nth-of-child(3) {
order: 2;
}
li:nth-of-child(4) {
order: 3;
}