0

My first question here. I got headache in using bootstrap pull and push on the website i'm working on.
This is what I want to achieve:
1. On large view port:
https://i.stack.imgur.com/LtPuP.png

2. On mobile view:
https://i.stack.imgur.com/i7iVP.png

I'm using bootstrap to pull the block B to the left. The problem is that it is important to have block A and B: width 4, and block C: width 8. I don't know how to do it because the total width will be more than 12. Please help me. Thank you.

Siguza
  • 21,155
  • 6
  • 52
  • 89
Jaysung Tab
  • 5
  • 2

1 Answers1

0

You can use column nesting in bootstrap to give A & B width:4 and C width:8.

<div class="col-md-4">
  <div class="col-md-12" style="height:100px;background:red;">A</div>
  <div class="col-md-12" style="height:100px;background:green">B</div>
</div>

<div class="col-md-8" style="height:200px;background:blue">C</div>

OR without nesting the code(in this C will be above B in small devices) will look like this

HTML

<div class="col-md-4" style="height:100px;background:red;">A</div>
<div class="col-md-8 float" style="height:100px;background:blue">C</div>
<div class="col-md-4" style="height:100px;background:green">B</div>

CSS

@media (min-width: 992px) 
  { 
    .float
    {
      float:right!important;
      height: 200px!important;
    } 
  }

Link to jsfiddle: http://jsfiddle.net/arshadmuhammed/0qvL5bxg/

arshad
  • 883
  • 7
  • 30
  • Hi! yes, I want to make C above B in small device, so i use the float method, and it's working! When i look at your answer, it seems so simple... I need to learn more. Thank you – Jaysung Tab Dec 01 '14 at 06:04