Bootstrap3 grid layout - html

Question

i can't find a way to make that work.
i have a sidebar which i pull to the right on desktop side.
i don't know on what row to put the pink div.
This is what i wrote but i don't think it's good.. http://jsfiddle.net/o7vmx2to/
<div class="row">
<article class="col-xs-24 col-sm-18 pull-right">
<div>Left div</div>
</article>
<aside class="col-xs-24 col-sm-6 pull-left">
<div class="row">
<div class="col-xs-24">
<ul class="list-unstyled button_list">
<li>button a</li>
<li>button b</li>
<li>button c</li>
<li>button d</li>
<li>button e</li>
<li>button f</li>
</ul>
</div>
</div>
<div class="row">
<div>This one need to be moved</div>
</div>
</aside>

Answer 1

You need to wrap your stuff in a <div class="container"> which automatically resizes when you change from xs to sm,md and lg
Bootstrap grid system is based on 12 columns not 24. So divide everything by 2
JSFiddle : http://jsfiddle.net/snatgu5f/
Actually it would be a lot easier if you swapped the blue and green divs in the left picture. Because then you end up with a standard bootstrap layout without the need for .pull-right class. I suspect you might actually want this. The code would need to be like this :
<div class="container"><div class="row">
<div class="col-xs-12 col-sm-3">
<nav><ul class="nav nav-stacked nav-pills">
<li class="diabled">Menu</li>
<li>Something</li>
</ul></nav>
</div>
<div class="col-xs-12 col-sm-9">
<article class="row">
Some Text
</article>
<article class="row">
Some more text
</article>
</div>
</div></div>
Yet if you really need the blocks to be positionned like in your picture, here's what you could do (the trick is ton only have one row and either to make the left-menu "pull-left" or the other blocks "pull-right"
<div class="container">
<div class="row">
<article class="col-xs-12 col-sm-9 pull-right">
Green Block </article>
<nav class="col-xs-12 col-sm-3">
<ul class="list-unstyled button_list">
<li>button a</li>
<li>button b</li>
<li>button c</li>
<li>button d</li>
<li>button e</li>
<li>button f</li>
</ul>
</nav>
<article class="col-xs-12 col-sm-9 pull-right">
Purple block</article>
</div>