CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
jason
jason

Reputation: 3962

show different arrangement if image and text is in mobile screen using bootstrap

I am using the following code and I am unable to get description below image in mobile screen. How can I make changes to the code ? The way it looks for full screen/desktop is correct. For size "sm" I want it to reorder text and image.

The order I'm looking for : Desktop - Title&desc left and image right.

Mobile - Title on top then image then the description.

Code:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-6">
        <h1 id="title">Title ....................................... more text </h1> 
        <h3 id="description">description ....................................... more description.................... ....................................... more description ....................................... more description....................................... </h3> 
      </div>
      <div class="col-md-6">
        <img src="http://www.unoosa.org/res/timeline/index_html/space-2.jpg" class="img-responsive">
      </div>
    </div>

Upvotes: 2

Views: 651

Answers (2)

Aakash Thakur
Aakash Thakur

Reputation: 3895

Is this what you want:http://jsfiddle.net/wVVbT/156/

Tried it with jQuery and it seems to work:

jQuery code:

  $(document).ready(function(){

        if($(window).width()<992){
            $('.image').after($('#description').get());
    }

    $(window).resize(function() {

   var hthree=$('#description').get();

  if($(window).width()<992)
  {

    $('.image').after(hthree);
  }else{ 


    $('#title').after(hthree);
  }
});
});

Upvotes: 1

Abhishek Pandey
Abhishek Pandey

Reputation: 13568

I have changed arrangement of html and gave classes to float image to right and text to left or you can use pull-right and pull-left classes provided by twitter-bootstrap.

Also there are some hidden classes provided by twitter-bootstrap you can use them to achieve your desired layout.

Source

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style>
.float-right {
  float: right
}
.float-left {
  float: left
}
</style>
<div class="container">
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-6 float-right">
        <h1 id="title" class="hidden-md hidden-lg">Title....................................... more text</h1>
        <img src="http://www.unoosa.org/res/timeline/index_html/space-2.jpg" class="img-responsive">
      </div>
      <div class="col-md-6 float-left">
        <h1 id="title" class="hidden-sm hidden-xs">Title....................................... more text</h1>
        <h3 id="description">description.......................................more description....................       ......................................more description     .......................................                         more description.......................................</h3>
      </div>
    </div>

Upvotes: 2

Related Questions