CODEWITHSUNDEEP
htmlcsstwitter-bootstrapmobileresponsive
Akash
Akash

Reputation: 29

Bootstrap reorder image and text in mobile view

My output image here

i have this code which has alternate image and text but in mobile it should be text and image / text and image but what i get is text and image / image and text

[1]<!-- Project One -->
<div class="row">
    <div class="col-md-6">
        <h3>Project One</h3>
        <h4>Subheading</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.Laudantium veniam exercitationem expedita laborum at voluptate. Labore, voluptates totam at aut nemo deserunt rem magni pariatur quos perspiciatis atque eveniet unde.</p>
          <a class="btn btn-primary" href="#">View Project <span class="glyphicon glyphicon-chevron-right"></span></a>

    </div>
    <div class="col-md-6">
         <a href="#">
            <img class="img-responsive" src="http://placehold.it/700x300" alt="">
         </a>

     </div>
</div>
<!-- /.row -->

<hr>

<!-- Project Two -->
<div class="row">
     <div class="col-md-6">
         <a href="#">
            <img class="img-responsive" src="http://placehold.it/700x300" alt="">
         </a>
     </div>
     <div class="col-md-6">
          <h3>Project Two</h3>
          <h4>Subheading</h4>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut, odit velit cumque vero doloremque repellendus distinctio maiores rem expedita a nam vitae modi quidem similique ducimus! Velit, esse totam tempore.</p>
          <a class="btn btn-primary" href="#">View Project <span class="glyphicon glyphicon-chevron-right"></span></a>
     </div>
 </div>
 <!-- /.row -->

my output is here

Upvotes: 0

Views: 786

Answers (2)

Darek Budziasz
Darek Budziasz

Reputation: 98

You need to add class push-xs-6 to div above image (there where you have col-md-6) and pull-xs-6 to div above text. It will swap position on device with width <768px

Upvotes: 0

Abhishek Pandey
Abhishek Pandey

Reputation: 13568

Put img and then text and use pull-right and pull-left classes to align.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class=container>
  <div class="row clearfix">
   <div class="col-md-6 pull-right">
      <a href="#">
        <img class="img-responsive" src="http://placehold.it/700x300" alt="">
      </a>

    </div>
    <div class="col-md-6 pull-left">
      <h3>Project One</h3>
      <h4>Subheading</h4>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.Laudantium veniam exercitationem expedita laborum at voluptate. Labore, voluptates totam at aut nemo deserunt rem magni pariatur quos perspiciatis atque eveniet unde.</p>
      <a class="btn btn-primary" href="#">View Project <span class="glyphicon glyphicon-chevron-right"></span></a>

    </div>
  </div>
  <!-- /.row -->

  <hr>

  <!-- Project Two -->
  <div class="row">
    <div class="col-md-6">
      <a href="#">
        <img class="img-responsive" src="http://placehold.it/700x300" alt="">
      </a>
    </div>
    <div class="col-md-6">
      <h3>Project Two</h3>
      <h4>Subheading</h4>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut, odit velit cumque vero doloremque repellendus distinctio maiores rem expedita a nam vitae modi quidem similique ducimus! Velit, esse totam tempore.</p>
      <a class="btn btn-primary" href="#">View Project <span class="glyphicon glyphicon-chevron-right"></span></a>
    </div>
  </div>
</div>

Upvotes: 1

Related Questions