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

Question

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?

Answer 1

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>

Answer 2

Use media queries and order :

 .container { margin: 0 0 40px; } .container:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .container img { width: 200px; } .container .image { float: left; } @media (max-width: 600px) { .container { display: flex; flex-flow: column; } .container .image { order: 2; } .container .title { order: 1; } .container .description { order: 3; } } 

 <div class="container"> <div class="image"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTmzMFjujgib4Md4MHoGD4VoIDwqjaG3DDrylUns_rY8dgSuybA" alt="" /></div> <div class="title">title</div> <div class="description">description</div> </div> 

Answer 3

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;
  }
}

Answer 4

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.