CODEWITHSUNDEEP
twitter-bootstrapresponsive-designtwitter-bootstrap-3
aressidi
aressidi

Reputation: 680

Bootstrap responsive design column breaking

I am relatively new to media queries and responsive design. I have a two column page body. In column 1 I have a photo of a book. In column 2 I have the author's name and a description.

When I scale the window down to the size of a mobile phone, I want the author's name to appear above the photo, and the description to appear below the photo.

How is this achieved? Attached is a sample image of what I just described.

how it should look on desktop, and then on mobile

Upvotes: 1

Views: 9616

Answers (2)

Carol Skelly
Carol Skelly

Reputation: 362430

Here is a Bootstrap friendly approach:

<div class="container">
<div class="row">
   <div class="a col-xs-12 col-sm-12 col-md-8 col-lg-8 col-md-push-4 col-lg-push-4">Author</div>
   <div class="b col-xs-12 col-sm-12 col-md-4 col-lg-4"><img src="//placehold.it/460x340" class="img-responsive"></div>
   <div class="c col-xs-12 col-sm-12 col-md-8 col-lg-8 col-md-push-4 col-lg-push-4">Description</div>
</div>
</div>

CSS: 

@media (min-width: 992px) {
    .container {
        position: relative;
     }
    .b {
        position: absolute;
        top: 0;
    }
    .a, .c {
        float: none;
    }
}

Demo: http://bootply.com/107543

Upvotes: 1

Slawa Eremin
Slawa Eremin

Reputation: 5415

You can try some trick with position: absolute
Checkout my fiddle: http://jsfiddle.net/Ln5vm/ 

<div class="content">
    <div class="author">Auhtor</div>
    <div class="photo">Photo image</div>
    <div class="subtitle">Subtitle</div>
</div>

.content{
    position: relative;
}

.author,
.subtitle{
    margin-left: 150px;
    font-size: 14px;
}

.photo{
    position: absolute;
    left: 0;
    top: 0;
    width: 130px;
    height: 130px;
    border: 1px solid #333;
    text-align: center;    
}
@media screen and (max-width: 768px){
    .photo{
        position: static;
        margin: 10px 0;
    }

    .author,
    .subtitle{
        margin-left: 0;
    }
}

Upvotes: 0

Related Questions