Bootstrap Order Of Image, Title & Description for Mobile vs Desktop

I have a bootstrap layout for my page on mobile that looks like this:

[Title]
[Image]
[Description]

On desktop I would like it to appear as so:

[Image][Title]
[Image][Description]

Whereby the single image from mobile takes up the left side of the screen and the title & description stack on top of each other on the right side. If the ordering was not changing here I would be able to do it but I cannot think how to have the title & description stack on top of each. My current layout pushes the description onto a new line instead. How do you create this configuration?



Easy solution : –

 <div class="row">
      <div class="col-sm-6">
        <img class="img-responsive" src="http://alto-live.s3.amazonaws.com/C39a2mvdXkhEsdxtqRWs55o4xGM/xw37B9xnyd1qi8ARMKz2jR_-A18/Photo/[2]/CRgx69es5Eeqfb2A35bWbg.jpg" alt="your image">
      </div>
      <div class="col-sm-6">
        <h3 class="text-center">Image Title</h3>
        <p class="text-center">Image desciption</p>
      </div>
    </div>

Use media queries and order:

Here a solution using bootstrap : Fiddle

<div class="row">
<div id="title" class="col-xs-12 col-sm-4 col-sm-push-4">
  TITLE
</div>
<div id="image" class="col-xs-12 col-sm-4 col-sm-pull-4">
  IMAGE
</div>
<div id="desc" class="col-xs-12 col-sm-4 col-sm-offset-4">
  Description
</div>

#title{
  background-color: #cd4578;
  height:30px;
}
#image{
  background-color: #666;
  height:60px;
}
#desc{
  background-color: #87de65;
  height:30px;
}
@media (min-width:768px) {
  #desc {
    margin-top:-30px;
  }
}

you can keep one div only visible in mobile, here’s the code:

    <div class="row">
    <div class="col-xs-12 visible-xs">
        <h3 class="text-center">Image Title</h3>
    </div>
    <div class="col-sm-6">
        <img class="img-responsive" src="http://alto-live.s3.amazonaws.com/C39a2mvdXkhEsdxtqRWs55o4xGM/xw37B9xnyd1qi8ARMKz2jR_-A18/Photo/[2]/CRgx69es5Eeqfb2A35bWbg.jpg"
            alt="your image">
    </div>
    <div class="col-sm-6">
        <h3 class="text-center hidden-xs">Image Title</h3>
        <p class="text-center">Image desciption</p>
    </div>
</div>

class ‘visible-xs’ will make div visible in only in mobile, and class ‘hidden-xs’ will make the h3 only hidden in mobile.