html5 - Bootstrap 3 responsive rectangle columns -

I'm trying to complete this layout:

On the left is 33% and right is 66%, on the left, each button is 50% height of its width, big rectangular

I am using this method:

Whatever I have done, its width is 75% higher than its width and blue rectangle is 25%

The left buttons are never the same height as the correct two divs

If you want to receive and you do not hate JavaScript, you can:

HTML

  & lt; Div class = "col -xs-4" & gt; & Lt; Div class = "color 1" & gt; & Lt; / Div & gt; & Lt; Div class = "color 2" & gt; & Lt; / Div & gt; & Lt; Div class = "color 3" & gt; & Lt; / Div & gt; & Lt; Div class = "color 4" & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; Div class = "col-xs-8" & gt; & Lt; Div class = "color 5" & gt; & Lt; / Div & gt; & Lt; Div class = "color 6" & gt; & Lt; / Div & gt; & Lt; / Div & gt;  

CSS

  .color1 {background: # 01FF21;} .color2 {background: # FF00DC;} .color3 { Background: # 01FFFF;} .color4 {background: # FFD800;} .color5 {background: # 01FF90;} .color6 {background: # 0094FF;} .col-xs-4 {padding: 0;} .col-xs- 8 {padding: 0;}  

javasCRIPT

  $ (document) .ready (function () {resizeBlocks () ; $ (Window). Resize (function () {resizeBlocks ();})}) function resizeBlocks () {$ ('. Color1'). Height ($ ('. Color1'). Width () / 2); $ ('. Color 2') height ($ () Width () / 2 'color 2.'.); $ ('. Color3') height ($ () Width () / 2 'color3.');); $ ('. Color4') height ($ () Width () / 2 'color4.'); $ ('.5 color5') height (3 * $ ('color1.') Width () / 2.) $ ('.6 color6') height ($ () Width () / 2 'color1.');); }  

And do not forget to load jQuery!