レスポンシブ表示の際にfontawsomeの表示がおかしくなります。

fontawsomeの表示がレスポンシブ（max-width: 375px）の際に表示がおかしくなります。
１枚目の画像が現在の状態です。
snsアイコンの順番が逆になってしまいました。
本来はfacebookアイコンが左でinstagramアイコンが右になります。
そして、２枚目３枚目にあるように
fontawsomeアイコンを囲っているaタグのみ本来の位置にあり、fontawsomeアイコンであるiタグが右側に来ています。
これがどう言うことなのかさっぱりわからず困っています。
改善策として試したことは、.sns-containerに対してdisplay: flex;を指定し、.facebookと.instagramに対してorderを指定し、順番を変えてみましたがダメでした。
目標は4枚目の画像のようにすることです。
何か改善策がわかるかた、ご教授いただけるとありがたいです。
よろしくお願いいたします。

html
1    <footer class="footer">
2      <div class="footer-container">
3        <div class="footer-logo">
4          <img class="footer-image" src="img/logo-white1.png" alt="画像">
5        </div>
6        <div class="footer-content">
7          <div class="footer-content-iroha">
8            <h1 class="footer-content-title">いろは</h1>
9            <p class="footer-content-text">
10              ここにも、<br>
11              何かメッセージが入ったり、<br>
12              お問い合わせへのリンクがあったり、<br>
13              ボタンを作ったりすることもできます。
14            </p>
15          </div>
16          <div class="footer-content-contact">
17            <h1 class="footer-content-title">Contact</h1>
18            <p class="footer-content-text">
19              〒891-4407<br>
20              鹿児島県熊毛郡屋久島町湯泊211-53<br>
21              TEL: 080-3187-8533<br>
22              e-mail: iroha.yakushima108@gmail.com
23            </p>
24          </div>
25        </div>
26      </div>
27      <div class="sns-container">
28        <a class="facebook"><i class="fab fa-facebook-square"></i></a>
29        <a class="instagram"><i class="fab fa-instagram-square"></i></a>
30      </div>
31      <div class="responsive-footer-texts">
32        <p class="responsive-footer-text">
33          〒891-4407<br>
34          鹿児島県熊毛郡屋久島町湯泊211-53<br>
35          080-3187-8533<br>
36          iroha.yakushima108@gmail.com
37        </p>
38      </div>
39    </footer>

maincss
1.footer {
2  height: 25vh;
3  background-color: black;
4  color: white;
5}
6
7.footer-container {
8  display: flex;
9}
10
11.footer-logo {
12  width: 28%;
13  text-align: center;
14}
15
16.footer-image {
17  width: 80%;
18  position: relative;
19  top: 15%;
20}
21
22.footer-content {
23  width: 72%;
24  display: flex;
25  align-items: center;
26}
27
28.footer-content-iroha {
29  margin-right: auto;
30}
31
32.footer-content-contact {
33  margin-right: auto;
34}
35
36.sns-container {
37  position: relative;
38  top: 0;
39  left: 63%;
40}
41
42.fa-facebook-square {
43  font-size: 3rem;
44  padding-right: 5px;
45}
46
47.fa-instagram-square {
48  font-size: 3rem;
49}
50
51.responsive-footer-texts {
52  display: none;
53}
54

responsivecss768px
1  .footer {
2    height: 35vh;
3  }
4
5  .sns-container {
6    font-size: 12px;
7  }
8
9  .fa-facebook-square {
10    position: relative;
11    top: 0;
12    left: 0;
13  }

responsivecss375px
1  .footer {
2    position: relative;
3  }
4
5  .footer-logo {
6    width: 75%;
7    position: absolute;
8    top: 25%;
9    left: 50%;
10    transform: translate(-50%, -50%);
11  }
12
13  .footer-content {
14    display: none;
15  }
16
17  .responsive-footer-texts {
18    display: block;
19    position: absolute;
20    top: 70%;
21    left: 50%;
22    transform: translate(-50%);
23    text-align: center;