CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
WebO
WebO

Reputation: 13

When the device is x-small, make the divs in the same line (Bootstrap)

Please see my code and jsfiddle below.

I want that when I minimize the browser to Extra-Small Deviece it will show the left side in one line (without the title "TITLE 1") in the center. Something like that: http://oi67.tinypic.com/10hksxs.jpg

Code:

<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/

Thanks!

Upvotes: 0

Views: 50

Answers (1)

Igor Ivancha
Igor Ivancha

Reputation: 3451

I hope it's what you looking for: 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>

Upvotes: 1

Related Questions