Ankit Ankit - 6 months ago 23
HTML Question

Two section layout with bootstrap

I'm trying to make a two section bootstrap layout work for desktop screens that turns into one section for mobile.

See codepen:http://codepen.io/anon/pen/WwWZKe

<div class="col-md-8 pull-right" style="background-color: #263;height:120px;">Section 1</div>
<div class="col-md-8 pull-right" style="background-color: #299;height:30px;">Section 2</div>

<div class="col-md-3 pull-left" style="background-color: #999;height:50px;">Section 3</div>
<div class="col-md-3 pull-left" style="background-color: #623;height:80px;">Section 4</div>
<div class="col-md-8 pull-right" style="background-color: #222;height:80px;">Section 5</div>


Ideally I want these to be divided in two columns (section 3,4 on left and 1,2,5 on right). But I don't want to create two super columns:

<div class="row">
<div class="col-md-4">section3 , section 4</div>
<div class="col-md-8">section 1, section 2, section 5</div>
</div>


since I want this order (section1-5) for mobile.

EDIT:

The expected order for desktop is:
3-4 (for left section) and 1-2-5 (for right section)
for mobile: 1-2-3-4-5
The Divs are of varying height and I am looking to get them stacked with no spaces.

UPDATE

So I tried another approach:

<div class="col-md-8 col-md-push-4">
<div style="background-color: #263;height:120px;">Section 1</div>
<div class="" style="background-color: #299;height:30px;">Section 2</div>
</div>

<div class="col-md-4 col-md-pull-8">
<div style="background-color: #999;height:50px;">Section 3</div>
<div class="" style="background-color: #623;height:280px;">Section 4</div>
</div>
<div class="col-md-8 col-md-push-4" style="background-color: #222;height:80px;">Section 5</div>


where I join the blocks that go together, but I still have an issue of spacing on right section before Section 5.

Answer

Okay, so it finally worked: http://codepen.io/anon/pen/pymNRm

<div class="col-xs-12 col-md-8 pull-right">
  <div style="background-color: #263;height:120px;">Section 1</div>
  <div class="" style="background-color: #299;height:30px;">Section 2</div>
</div>

<div class="col-xs-12 col-md-4 pull-left">
  <div style="background-color: #999;height:50px;">Section 3</div>
  <div class="" style="background-color: #623;height:280px;">Section 4</div>
</div>
<div class="col-xs-12 col-md-8 pull-right" style="background-color: #222;height:80px;">Section 5</div>

I had to combine the blocks that go together and use pull-right and pull-left