如何使用Bootstrap在列中嵌套行

Question

我一直试图以这样的方式编写代码，即使屏幕像移动屏幕一样小，布局看起来也不错。

以下是我尝试编码的方式

<div class="row" id="slide_show">
  <div class="col-md-9 col-sm-9 col-xs-12">
    <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel" data-slide-to="1"></li>
      <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner" role="listbox">
      <div class="item active">
        <img id="img1" src="img1.jpeg">
      </div>
      <div class="item">
        <img id="img1" src="img2.jpeg">
      </div>
      <div class="item">
        <img id="img1" src="img3.jpeg">
      </div>
    </div>
  </div>
  <div class="col-md-3 col-sm-3 col-xs-12">
    <div class="row">
      <div class="col-md-12 col-sm-12 col-xs-6" id="Tiles">
        <img id="img_tiles" src="Calendar.gif" />
        <div class="textbox">
          <p class="text" align="center"><i><b>Events at calendar 
            <br />click to know the details about events this year..</b></i>
          </p>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-md-12 col-sm-12 col-xs-6" id="Tiles">
        <img id="img_tiles" src="travel.jpg" />
        <div class="textbox">
          <p class="text" align="center"><i><b>Events at calendar 
            <br />click to know the details about events this year..</b></i>
          </p>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-md-12 col-sm-12 col-xs-6" id="Tiles">
        <img id="img_tiles" src="vacancy.jpg" />
        <div class="textbox">
          <p class="text" align="center"><i><b>Events at calendar 
            <br />click to know the details about events this year..</b></i>
          </p>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-md-12 col-sm-12 col-xs-6" id="Tiles">
        <img id="img_tiles" src="info.jpg" />
        <div class="textbox">
          <p class="text" align="center"><i><b>Events at calendar 
            <br />click to know the details about events this year..</b></i>
          </p>
        </div>
      </div>
    </div>
  </div>
</div>

CSS代码

 #Tiles {
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -ms-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s; 


  overflow:hidden;
  width:200px;
  height:150px;
  padding-left:0px;

    margin-left:30px;
    border:1px solid #CCC;
  padding-top: 0px;
  margin-top:40px;
  position:relative;
}

#Tiles .textbox {
  position:absolute;
  top:0;
  left:0;
  width:200px;
  height:150px;
  margin-left:-210px;
}

#Tiles:hover .textbox {
  margin-left:0;
}

#Tiles img {
  margin-left:0;
}

#Tiles:hover img {
  margin-left:210px;
}

.text {
  padding-top: 40px;
}

#Tiles img, .textbox {
  -webkit-transition: all 0.7s ease;
  transition: all 0.7s ease;
}

#img_tiles{
 width:200px;
 height:165px;
 padding-top:0px; 
 padding-bottom:15px;

}

结果在桌面和平板电脑上看起来不错，但在较小的屏幕上，右端的图块会垂直显示在幻灯片放映下方。我该怎么做才能水平显示它们？或至少像连续两个瓷砖。这就是我使用col-xs-6

的原因