CODEWITHSUNDEEP
htmlcsstwitter-bootstrapresponsive-design
Tom
Tom

Reputation: 85

Bootstrap Alternating Layout to stacked in mobile

I have a basic responsive layout in Bootstrap where the image sits next to the block of text. In the first row the image is on the left, in the second row the image is on the right. This repeats down the page.

The problem: when the user is on a mobile device, the images go full width (as they should), however for any row with the image aligned to the right, it is sitting below the text rather than above (see code below). I understand why this is happening, but am wondering if there is a class within bootstrap that can correct this? It must be fairly common, so what is the suggested best practice here?

<div class="container">
    <div class="row feature">
          <div class="col-sm-6 col-md-6">
            <img src="url" class="img-responsive"/>
          </div>
          <div class="col-sm-6 col-md-6">
            <h1>title</h1>
            <h3>subtitle</h3>
            <p>body</p>
          </div>      
    </div>
    <div class="row feature">
          <div class="col-sm-6 col-md-6">
            <h1>title</h1>
            <h3>subtitle</h3>
            <p>body</p>
          </div>
          <div class="col-sm-6 col-md-6">
            <img src="url" class="img-responsive" />
          </div>      
    </div>
</div>

Any help would be appreciated.

Upvotes: 3

Views: 3321

Answers (1)

BENARD Patrick
BENARD Patrick

Reputation: 31005

You're looking for something like Nesting Columns : Here is the doc : http://getbootstrap.com/css/#grid-nesting

Bootply : http://www.bootply.com/qsdH9jr70F

Look this code : and specially at col-sm-push-6 and col-sm-pull-6

HTML : 

<div class="container">
    <div class="row feature">
          <div class="col-sm-6 col-md-6">
            <img src="url" class="img-responsive">
          </div>
          <div class="col-sm-6 col-md-6">
            <h1>title</h1>
            <h3>subtitle</h3>
            <p>body</p>
          </div>      
    </div>
    <div class="row feature">      
          <div class="col-sm-push-6 col-sm-6 col-md-6">   <!--   HERE   -->
            <img src="url" class="img-responsive">
          </div>   
          <div class="col-sm-6 col-sm-pull-6 col-md-6">   <!--   HERE   -->
            <h1>title</h1>
            <h3>subtitle</h3>
            <p>body</p>
          </div>   
    </div>
</div>

Upvotes: 3

Related Questions