Twitter Bootstrap Question posted in

Reorder Twitter Bootstrap rows in responsive mode

I’m developing a site right now. I got 7 rows all with content, every second img placed on the right side with the text on the left side and every second img placed on the left with the text on the right side. In responsive mode I would like all img to appear on top. How can I achieve this while still keeping the desktop format I have now. This is the code where in responsive mode the img should appear on top:

<hr>
      <!-- Row 2 -->
<div class="container">
  <div class="row padding">
     <div class="col-md-6" style="text-align:center;">
      <h2>Phase 2:</h2>
         <p>Lorem ipsum dolor sit amet, no has dicam sanctus gloriatur,  vivendo volumus appellantur ad est. Et elitr qualisque vim. Ad salutandi concludaturque per, nec eu unum tamquam oportere. Ut civibus platonem mel. Pri no appetere conceptam. Assum malorum eum id, vix ne posse dicam.</p>
     </div>
     <div class="col-md-6">
      <img src="images/image1.png" class="img-responsive" alt="search"/>
     </div>    
  </div>
      <hr>
      <!-- Row 3 -->

Thanks in advance!

Tags:

2

Answers


  1. 0

    You can use media queries and display: flex property and order the elements.

    But first add custom classes to the 2 col-md-6. I have added .image and .text. Note that I have added the media query for <=768px devices. Change the width to your requirement.

    HTML

    <div class="container">
 <div class="row padding">
   <div class="col-md-6 text" style="text-align:center;">
     <h2>Phase 2:</h2>
     <p>Lorem ipsum dolor sit amet, no has dicam sanctus gloriatur,  vivendo volumus appellantur ad est. Et elitr qualisque vim. Ad salutandi concludaturque per, nec eu unum tamquam oportere. Ut civibus platonem mel. Pri no appetere conceptam. Assum malorum eum id, vix ne posse dicam.</p>
   </div>
   <div class="col-md-6 image">
     <img src="http://placehold.it/350x150" class="img-responsive" alt="search">
   </div>    
 </div>
</div>

    CSS

    @media (max-width:768px) {
  .row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }

  .text {
    order: 2;
  }

  .image {
    order: 1;
  }
}

    Bootply Demo

    Login or Signup to reply.
  2. 0

    The solution from Manoj does work but isn’t completely browser compatible. I would recommend re-organising the HTML so that the image is on top and then using float:right; to achieve the required structure. Bootstrap has a class called pull-right which gives an element the float. The code would look like this: 

    <div class="container">
  <div class="row padding">
     <div class="col-md-6 pull-right">
        <img src="images/image1.png" class="img-responsive" alt="search"/>
     </div>  
     <div class="col-md-6" style="text-align:center;">
      <h2>Phase 2:</h2>
         <p>Lorem ipsum dolor sit amet, no has dicam sanctus gloriatur,  vivendo volumus appellantur ad est. Et elitr qualisque vim. Ad salutandi concludaturque per, nec eu unum tamquam oportere. Ut civibus platonem mel. Pri no appetere conceptam. Assum malorum eum id, vix ne posse dicam.</p>
     </div>  
  </div>

    When it gets below the ‘md’ resolution the image will now display on top of the text. You can then use a media query to clear the float if you wish to centre or left align it on smaller resolutions.

    Hope this helps

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search