CODEWITHSUNDEEP
twitter-bootstrap
Kashi Venkatesh
Kashi Venkatesh

Reputation: 3

bootstrap row/column best practice for this layout

Required layout: for desktops as shown in the image below. For mobile/tablets blocks stacked in the order 1,2,3. Problem: unable to find the combination of row and column for bootstrap grid.

please help me in coding the same. Thank you.

enter image description here

Upvotes: 0

Views: 665

Answers (1)

Carol Skelly
Carol Skelly

Reputation: 362780

Since Bootstrap uses float:left you'll need to use pull-right on the 2nd column...

<div class="row">
    <div class="col-xs-12 col-md-8">
        <div class="well"> 
          1
        </div>
      </div>
      <div class="col-xs-12 col-md-4 pull-right">
        <div class="well taller"> 
          2
        </div>
      </div>
      <div class="col-xs-12 col-md-8">
        <div class="well tall"> 
          3
        </div>
      </div>
   </div>

http://www.codeply.com/go/aLE3gzcimH

Upvotes: 1

Related Questions