在这个左侧的垂直菜单中，我的图标怎么不会漂浮到一行？

Question

我正在尝试使3个社交图标（.vi .vih .vii）出现在电子邮件/电话和位置摘要的上方。当前，电子邮件和电话堆栈实际上位于该位置的右侧，显示为2列。我似乎无法将图标调整为不在电子邮件/电话上方的垂直列中，而不会取消其他样式？

使用CSS和SCSS进行交易。

CSS

.main-menu .info {
    margin-bottom: 15px;
    position: absolute;
    bottom: 38px;
    left: 0;
    width: 310px;
    padding: 30px 30px 0px 30px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box; }
    @media (max-width: 768px) {

      .main-menu .info {
        width: 100%;
        margin-bottom: 0px;} }

.main-menu .info .vi {
	  position:absolute;
	  top: 20px;
	  right: 250px;
      width:16px;
	  height:28px;}

.main-menu .info .vii {
	  position:absolute;
	  top: 20px;
	  right: 210px;
      height:26px;
	  width:26px;}
/*/_menu.scss */
.main-menu .info .vih {
	 position:absolute;
	 top: 20px;
	 right: 170px;
     width:26px;
	 height:28px;}  
/* _menu.scss */
    .main-menu .info .email {
      margin-bottom: 20px; }
      /* _menu.scss */
      .main-menu .info .email a {
        font-family: Montserrat;
        font-size: 16px;
        text-decoration: none;
        color: #a7a9ac; }
    /* line 78,_menu.scss */
    .main-menu .info .phone a {
      font-family: Montserrat;
      font-size: 16px;
      text-decoration: none;
      color: #a7a9ac; }
    /* _menu.scss */
    .main-menu .info .location {
      position: absolute;
      top: 40px;
      right: 30px;
      -webkit-transition: -webkit-transform 0.25s;
      transition: -webkit-transform 0.25s;
      transition: transform 0.25s;
      transition: transform 0.25s, -webkit-transform 0.25s; }
      /*_menu.scss */
      .main-menu .info .location:hover {
        -webkit-transform: translateY(-3px);
                transform: translateY(-3px); }
**SCSS**
.main-menu{
	position: fixed;
	z-index: 100;
	height: calc(100vh);
	top: 0;
	left: 0;
	background: rgba(88,89,91,0.97);
	background-blend-mode: multiply;
	width: 310px;
	padding: 30px;
	box-sizing: border-box;
	transform: translate3d(-100%, 0, 0);
	transition: transform 0.5s;
	overflow: hidden;
	@media(max-width: $mobile){
		width: 100%;
	}
	.menu-logo{
		text-align: center;
		img{
			width: 176px;
		}
	}
	.close-menu{
		position: absolute;
		right: 36px;
		margin-top: 20px;
		img{
			cursor: pointer;
		}
	}

	.menu-back{
		margin-top: 20px;
		opacity: 0;
		transition: opacity 0.25s;
		pointer-events: none;
		img{
			cursor: pointer;
		}
	}

	.back-button-visible{
		opacity: 1;
		pointer-events: all;
	}

	.info{
		margin-bottom: 15px;
		position: absolute;
		bottom: 38px;
		left: 0;
		width: 310px;
		padding: 30px 30px 0px 30px;
		box-sizing: border-box;
		@media(max-width: $mobile){
			width: 100%;
			margin-bottom: 0px;
		}
		.vi{
	      	padding:10px;
		}
		.vii{
			padding:10px;
		}
		.vih{
			padding:10px;
		}
		.email{
			margin-bottom: 20px;
			a{
				font-family: Montserrat;
				font-size: 16px;
				text-decoration: none;
				color: $light-grey;
			}
		}
		.phone{
			a{
				font-family: Montserrat;
				font-size: 16px;
				text-decoration: none;
				color: $light-grey;
			}
		}
		.location{
			position: absolute;
			top:40px;
			right: 30px;
			transition: transform 0.25s;
			&:hover{
				transform: translateY(-3px);
			}
		}
	}
}

<div class="wrapper">
			<header role="banner" class="header">
				<div class="header-wrap">
					<div class="main-menu">
						<div class="menu-logo">
							<a href="<?php bloginfo('url'); ?>"><img 
alt="logo" src="<?php echo get_field('menu_logo', 'options')['url'];?>" 
/></a>
						</div>
						<div class="close-menu">
							<img class="close-button" src="/wp- 
content/themes/name/img/menu-close.png" alt="">
						</div>
						<div class="menu-back">
							<img class="back-button" src="/wp- 
content/themes/name/img/menu-back.png" alt="">
						</div>
						<?php require('template-parts/main-nav.php'); ? 
>
							<div class="info">
							  <div class="vi">
								  <a href="<?php 
 the_field('facebook_link', 'option'); ?>" target="_blank">
									  <img src="/wp- 
 content/themes/name/img/menu-vi.png" alt="" style="width:16px;">
								  </a>
							  </div>
							<div class="vii">
								<a href="<?php 
 the_field('facebook_link', 'option'); ?>">
									<img src="/wp- 
 content/themes/name/img/menu-vii.png" alt="" style="width:26px;">
								</a>
							</div>
							  <div class="vih">
								  <a href="<?php 
 the_field('facebook_link', 'option'); ?>">
									  <img src="/wp- 
 content/themes/name/img/menu-vih.png" alt="" style="width:26px;">
								  </a>
							  </div>
							<div class="email">
								<a href="mailto:<?php 
 the_field('email', 'option'); ?>"><?php the_field('email', 'option'); 
 ?></a>
							</div>
							<div class="phone">
								<a href="tel:<?php 
 the_field('phone_number', 'option'); ?>"><?php 
 the_field('phone_number', 'option'); ?></a>
							</div>
							<div class="location">
								<a target='blank' href="<?php 
  the_field('google_maps_link', 'option'); ?>">
									<img src="/wp- 
  content/themes/name/img/menu-location.png" alt="">
								</a>
							</div>
						</div>
					</div>

					<div class="nav-button">
						<div class="menu-button">
							<div class="menu-title">
								MENU
							</div>
							<div class="hamburger">
								<div class="bar"></div>
								<div class="bar"></div>
								<div class="bar"></div>
							</div>
						</div>
					</div>

					<div class="logo">
						<a href="<?php bloginfo('url'); ?>"><img 
 alt="logo" src="<?php echo get_field('logo', 'options')['url'];?>" /> 
 </a>
					</div>
					<div class="page-title">
						<?php the_title(); ?>
					</div>

					<div class="contact">
						<a href="<?php echo get_field('contact_link', 
 'options')['url'];?>">
							<div class="contact-text">
								LET'S TALK
							</div>

							<div class="envelope">
								<img src="/wp- 
content/themes/name/img/Envelope.png" alt="">
							</div>
						</a>
					</div>

				</div>
			</header>
		</div>