Twitter bootstrap place right Column on top on mobile view

Problem statement

Consider a scenario where you have DOM like following..

<div class="container">
    <div class="row">
        <div class="col-md-6">
            A [TEXT]
        </div>
        <div class="col-md-6">
            B [IMAGE]
        </div>
    </div>
</div>

But on many occasions you need to display bottom column i.e "B[IMAGE]" at the top of "A[TEXT]" section on mobile devices.

Solution:

If you are using twitter bootstrap, you can make it without writing any extra javascript or CSS. So here comes the solution. Twitter bootstrap provide 2 classes

1. pull-left (float:left )
2. pull-right (float:right )

Step 1:
Add first column as image container (B [IMAGE]) and add class pull-right to it. (it will show image on right side of the page on desktop.)

Step 2:
Add second column as text container ( A [TEXT] ) and add class pull-left to it. (it will show texts on left side of the page on desktop.)

Your DOM structure should look like below.

<div class="container">
    <div class="row">
        <div class="col-md-6 pull-right">
              B [IMAGE] 
        </div>
        <div class="col-md-6 pull-left">
              A [TEXT]
        </div>
    </div>
</div>

Preview

See the Pen Twitter bootstrap place right column image on top of text on mobile devices by Yashwant Patel (@yashwant) on CodePen.

Download Source

Post Tags:

CSS HTML5 Twitter Bootstrap