this an ampersand question

ampersand_functionality

.front {
  .header-container {
    background-image: url("../images/screw.jpg");
    height:400px;
    background-attachment: fixed;
    background-position: 0% 0%;
    background-repeat: no-repeat;
    background-size: cover;

    @include breakpoint(1px 499px) {
      height:200px;
    }


    .header-wrapper {
      @include breakpoint(1px 499px) {
        position: fixed;
        width: 100%;
        top: 45px;
      }

      .navbar-horizontal & {   //THIS IS THE LINE I AM TALKING ABOUT ANNE
        top:45px;
      }


      @include breakpoint($small) {
          position: relative;
          top: 140px;
        }


...

That outputs: .navbar-horizontal .front ....

My hope is that  I could get it to output: .front.navbar-horizontal or .navbar-horizontal.front