CSS中元素的反转

Question

有几条关于这个主题的消息，但我无法解决这个问题。如这里：

How to reverse the order of elements in responsive mode

我不明白为什么我的元素顺序会发生变化？为什么我右边的元素不是Deposit 而不是Paidout？如下图所示。

不使用flex可以解决这个问题吗？

@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');

body {
    margin: 0;
    padding: 0;

}

.txt10 {
    font-family: 'Open Sans', sans-serif;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    color: red;
}

.header{
  display: inline-block;
  width: 100%;
  background-color: aqua;
  height: 20px;
  padding-top: 13px;
  padding-bottom: 13px;
}

.header-items-left{
  float: left;
  padding-left: 20px;
}

.left{
  margin-left: 150px; 
}


.header-items-right{
  float: right;
  padding-right: 10px; /*espacement entre les deux lignes à droite */

}

.right{
  margin-right: 50px; 
}

  <div class="header">
    <div class="left">
      <div class="header-items-left"><i class="far fa-calendar"></i>138 running days</div>
      <div class="header-items-left"><i class="far fa-envelope"></i>admin@superbtc.biz</div>
    </div>
    <div class="right">
      <div class="header-items-right"><i class="fas fa-angle-right"></i> deposit</div>
      <div class="header-items-right"><i class="fas fa-angle-right"></i> paidout</div> 
      
    </div>
  </div>

Answer 1

在容器上使用float: right 而在这两个项目上使用display: inline-block。

.right {
  float: right;
}

.text {
  display: inline-block;
  padding-left: 20px;
}

<div class='right'>
  <div class='text'>first</div>
  <div class='text'>second</div>
</div>