html - 当设备是 x-small 时，使 div 在同一行(Bootstrap)

Question

请在下面查看我的代码和 jsfiddle。

我希望当我将浏览器最小化到超小型设备时，它会在中间一行显示左侧(没有标题“TITLE 1”)。类似的东西:http://oi67.tinypic.com/10hksxs.jpg

代码:

<div class="container text-center">
 <div class="row">
   <div class="col-sm-4">
     <h4><strong>TITLE 1</strong></h4>
     <div class="row">
      <div class="col-sm-4">
        <img src="http://demo.chimerathemes.com/wp-content/themes/apppress/images/icons/included/color.png">
      </div>
      <div class="col-sm-8 text-left">
      <p class="mid-image-block"><strong>MINI TITLE</strong>
      <br>TEXT
      <br>TEXT2 </p>
      </div>
     </div>
     <div class="row">
      <div class="col-sm-4">
        <img src="http://demo.chimerathemes.com/wp-content/themes/apppress/images/icons/included/color.png">
      </div>
      <div class="col-sm-8 text-left">
      <p class="mid-image-block"><strong>MINI TITLE</strong>
      <br>TEXT
      <br>TEXT2 </p>
      </div>
     </div>
     <div class="row">
      <div class="col-sm-4">
        <img src="http://demo.chimerathemes.com/wp-content/themes/apppress/images/icons/included/color.png">
      </div>
      <div class="col-sm-8 text-left">
      <p class="mid-image-block"><strong>MINI TITLE</strong>
      <br>TEXT
      <br>TEXT2 </p>
      </div>
     </div>
  </div>
  <div class="col-sm-8">
  <h4><strong>TITLE 2
  </div>
  </div>
</div>

JSFIDDLE:http://jsfiddle.net/Wy22s/864/

谢谢!

Answer 1

我希望这是您要找的:jsfiddle

<div class="container text-center">
 <div class="row hidden-xs">
   <div class="col-sm-4">
     <h4><strong>TITLE 1</strong></h4>
   </div>
   <div class="col-sm-8">
     <h4><strong>TITLE 2</strong></h4>
   </div>
 </div> 

 <div class="row">
  <div class="col-xs-4">
    <div class="row">
      <div class="col-xs-4">
        <img src="http://demo.chimerathemes.com/wp-content/themes/apppress/images/icons/included/color.png">
      </div>
      <div class="col-xs-8 text-left">
        <p class="mid-image-block"><strong>MINI TITLE</strong>
         <br>TEXT
         <br>TEXT2 </p>
       </div>
     </div>
   </div>


  <div class="col-xs-4">
    <div class="row">
      <div class="col-xs-4">
        <img src="http://demo.chimerathemes.com/wp-content/themes/apppress/images/icons/included/color.png">
      </div>
      <div class="col-xs-8 text-left">
        <p class="mid-image-block"><strong>MINI TITLE</strong>
         <br>TEXT
         <br>TEXT2 </p>
       </div>
     </div>
  </div>


  <div class="col-xs-4">
    <div class="row">
      <div class="col-xs-4">
        <img src="http://demo.chimerathemes.com/wp-content/themes/apppress/images/icons/included/color.png">
      </div>
  <div class="col-xs-8 text-left">
    <p class="mid-image-block"><strong>MINI TITLE</strong>
      <br>TEXT
      <br>TEXT2 </p>
    </div>
   </div>
  </div>
 </div>
</div>