Clever Geek Handbook

Boot striped layout

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

Problem: When the user is on a mobile device, the images are full width (as they should be), however for any line with the image right aligned, it sits below the text, not above (see code below). I understand why this is happening, but I'm wondering if there is a class in bootstrap that can fix this? This should be fairly common, so what is the best practice?

<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.

+3


source to share


1 answer


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

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

Have a look at this code: and especially in col-sm-push-6

andcol-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>
+3


source






More articles:


All Articles