Bootstrap响应图像 - 保持向右，向左隐藏

Question

拥有以下代码。

http://www.bootply.com/QAEvSNWph4

我们需要的是当您将屏幕的右侧放入时，图像的左侧会折叠（隐藏）。在这个例子中，基本上当我们减少浏览器宽度时，我们需要总是看到Rooster。

有什么想法吗？

HTML代码

    <section id="main-slider" class="no-margin">
  <div class="carousel slide">
    <div class="carousel-inner">
      <div class="item active" style="background-image: url(http://beta.madrooster.com/images/carousel_bg.png)">
        <div class="container">
          <div class="row-wrapper rodney index">
            <div id="hosting-plans" class="container">
              <div class="row">
                <div class="col-xs-12 col-sm-12 col-md-12 text-center"> &nbsp; </div>
              </div>
              <div class="row text-center">
                <div class="col-xs-12 col-md-5 col-lg-4 hidden-sm"> &nbsp; </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!--/.item-->
    </div>
    <!--/.carousel-inner-->
  </div>
  <!--/.carousel-->
  <a class="prev hidden-xs" href="#main-slider" data-slide="prev"> <i class="icon-angle-left"></i> </a> <a class="next hidden-xs" href="#main-slider" data-slide="next"> <i class="icon-angle-right"></i> </a> </section>

CSS

    @media(min-width:767px) {

#main-slider {
  position: relative;
  margin-top:0px;
}
@media(max-width:767px) {
#main-slider {
  margin-top:50px;
}

}

#main-slider .carousel p {
  font-size: 24px;
  line-height:24px;
  color:#FFF;
  text-transform:uppercase;
  font-weight:400;
  padding-left:0;
}
#main-slider .carousel .btn {
  color: #fff;
  border-radius: 0;
  margin-top: 5px;
}
#main-slider .carousel .btn:hover {
  background-color: rgba(255, 255, 255, 0.3);
}
#main-slider .carousel .boxed {
  padding: 10px 15px;
  background-color: rgba(0, 0, 0, 0.8);
  display: inline-block;
}
#main-slider .carousel .item {
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  left: 0 !important;
  opacity: 0;
  top: 0;
  position: absolute;
  width: 100%;
  display: block !important;
  height: 600px;
  -webkit-transition: opacity ease-in-out 500ms;
  -moz-transition: opacity ease-in-out 500ms;
  -o-transition: opacity ease-in-out 500ms;
  transition: opacity ease-in-out 500ms;
}
#main-slider .carousel .item:first-child {
  top: auto;
  position: relative;
}
#main-slider .carousel .item.active {
  opacity: 1;
  -webkit-transition: opacity ease-in-out 500ms;
  -moz-transition: opacity ease-in-out 500ms;
  -o-transition: opacity ease-in-out 500ms;
  transition: opacity ease-in-out 500ms;
  z-index: 1;
}
#main-slider .prev,
#main-slider .next {
  position: absolute;
  top: 50%;
  background-color: rgba(0, 0, 0, 0.3);
  color: #fff;
  display: inline-block;
  margin-top: -25px;
  font-size: 24px;
  height: 50px;
  width: 50px;
  line-height: 50px;
  text-align: center;
  border-radius: 4px;
  z-index: 5;
  outline: 0;
}
#main-slider .prev:hover,
#main-slider .next:hover {
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 10px;
}
#main-slider .prev {
  left: 10px;
}
#main-slider .next {
  right: 10px;
}
#main-slider .active .animation.animated-item-1 {
  -webkit-animation: fadeInUp 300ms linear 300ms both;
  -moz-animation: fadeInUp 300ms linear 300ms both;
  -o-animation: fadeInUp 300ms linear 300ms both;
  -ms-animation: fadeInUp 300ms linear 300ms both;
  animation: fadeInUp 300ms linear 300ms both;
}
#main-slider .active .animation.animated-item-2 {
  -webkit-animation: fadeInUp 300ms linear 600ms both;
  -moz-animation: fadeInUp 300ms linear 600ms both;
  -o-animation: fadeInUp 300ms linear 600ms both;
  -ms-animation: fadeInUp 300ms linear 600ms both;
  animation: fadeInUp 300ms linear 600ms both;
}
#main-slider .active .animation.animated-item-3 {
  -webkit-animation: fadeInUp 300ms linear 900ms both;
  -moz-animation: fadeInUp 300ms linear 900ms both;
  -o-animation: fadeInUp 300ms linear 900ms both;
  -ms-animation: fadeInUp 300ms linear 900ms both;
  animation: fadeInUp 300ms linear 900ms both;
}
#main-slider .active .animation.animated-item-4 {
  -webkit-animation: fadeInUp 300ms linear 1200ms both;
  -moz-animation: fadeInUp 300ms linear 1200ms both;
  -o-animation: fadeInUp 300ms linear 1200ms both;
  -ms-animation: fadeInUp 300ms linear 1200ms both;
  animation: fadeInUp 300ms linear 1200ms both;
}

@media(max-width:767px) {
    #main-slider .carousel h2 {
      font-size: 42px;
      line-height:36px;
      color:#FFF;
      text-transform:uppercase;
      margin-top:30%;
      font-weight:700;
      padding-left:0;
    }
}

.carousel-indicators li { visibility: hidden; }