Html CSS:Bootstrap Mobile将行上的两列对齐

有人能告诉我，当我在手机上查看时，如何对齐同一行上的两列吗。现在的情况如下：

我希望它是箭头，旁边是主页/设计。如果我把它放在一列div中，那么我就不能将

HOME/DESIGN

居中，因为边距不起作用

<div class="content-fluid">
  <div class="row back-box">
     <div class="col-sx-1 col-md-1">
       <div class="arrow-icon"></div>
     </div>
     <div class="col-sx-4 col-md-4" style="padding-top: 1px">
       <p><a href="http://localhost/artbox88-com"> HOME</a> / <span>DESIGN</span> </p>
     </div>
  </div>
</div>

你打错了：

col sx

应该是

col xs

    .arrow-icon
    {
     height: 25px;
     width: 25px;
     background-size: contain;
     background-image:url('../images/back.png');
     background-repeat: no-repeat;
     display: inline-block;
     }

    .arrow-icon:hover
    {
     background-size: 25px;
     background-image:url('../images/back_hover.png');
    }

    .back-box
    {
     padding: 50px 0px 0px 25px;
     position: absolute;
     width: 400px;
    }

    .back-box p
    {
      color: #474747;
      display: inline;
      font-family: "FuturaDemiC";
      font-size: 12px;
     }

    .back-box p a:hover
    {
     color: #858585;
     text-decoration: none;
    }

    .back-box span
    {
     color: #858585;
     }