CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3
Novocaine
Novocaine

Reputation: 4786

Bootstrap column ordering

I'm having a bit of a mental block - I'm sure there's a simple solution to this, but I'm just not getting it...

I'm trying to achieve the following layout. The top image is a mobile layout and the lower is a desktop layout.

Note: These are meant to represent a single area at Mobile and Desktop view ports not two sections on a single page.

enter image description here

I've attempted to build what I would need in This Fiddle but it's not right, and I can't figure out how to do this without duplicating div #3.

<div class="wrap">
  <div class="pad col-sm-8">
    <div class="row">
      <div class="pad a col-xs-12"></div>
      <div class="pad c col-xs-12"></div>
    </div>
  </div>
  <div class="pad b col-sm-4"></div>
  <div class="clearfix"></div>
</div>

<div class="wrap">
  <div class="pad col-xs-8">
    <div class="row">
      <div class="pad a col-xs-12"></div>
    </div>
  </div>
  <div class="pad b col-xs-4"></div>
  <div class="pad c col-xs-12"></div>
  <div class="clearfix"></div>
</div>

Is it possible to achieve the layout I'm after without having to duplicate div #3? I could very easily get what I wanted by using duplicate divs but that's obviously not desirable.

Upvotes: 0

Views: 195

Answers (2)

Anthony Patton
Anthony Patton

Reputation: 596

How about a pull-right on div b?

<div class="wrap">
  <div class="pad b col-xs-4 col-md-4 pull-right"></div>
  <div class="pad a col-xs-8 col-md-8"></div>
  <div class="pad c col-xs-12 col-md-8"></div>
  <div class="clearfix"></div>
</div>

Updated Fiddle: https://jsfiddle.net/kfyLLvt5/2/

Upvotes: 2

George-Cristian
George-Cristian

Reputation: 50

Try this: It's like in your image:

<div class="wrap">
  <div class="pad col-md-12">
    <div class="row">
      <div class="pad a col-xs-8"></div>
      <div class="pad c col-xs-4"></div>
    </div>
  </div>
  <div class="pad b col-md-4"></div>
  <div class="clearfix"></div>
</div>

<div class="wrap">
  <div class="pad col-xs-8">
    <div class="row">
      <div class="pad a col-xs-12"></div>
    </div>
  </div>
  <div class="pad b col-xs-4"></div>
  <div class="clearfix"></div>
</div>

Upvotes: 0

Related Questions