Arranging DIVs on the screen with Bootstrap - html

Question

I have a page with 1 visible DIV and 2 hidden DIVs. When I click a button I want to show all 3 DIVs in the order as displayed below. I'm using Bootstrap.
Whats is happening is that the Visible Div is appearing only after the Hidden Div 2
Here's the code:
<div id="divEditor" hidden class="col-sm-8">
<textarea name="editor" id="editor"></textarea>
<div class="col-sm-6 marginVert12">
<a class="btn btn-single btn-gray pull-left" ng-click="stopEditing()"><i class="fa-angle-left"></i> Voltar</a>
</div>
<div class="col-sm-6 marginVert12">
<label class="col-sm-8">
<input type="text" placeholder="Nome" ng-model="nomeTemplate" class="form-control" />
</label>
<a class="btn btn-single btn-success col-sm-2" ng-click="stopEditing()"><i class="fa-save"></i> Guardar</a>
</div>
</div>
<div id="divVariaveis" class="col-sm-4 divDetail">
<h3 class="textAlign-Center">Variáveis</h3>
<table class="table table-bordered">
<thead>
<tr>
<th>Valor</th>
<th>Texto</th>
</tr>
</thead>
<tbody>
<tr>
<td>Número Contrato</td>
<td>##contrato##</td>
</tr>
<tr>
<td>Gestor de Conta</td>
<td>##gc##</td>
</tr>
<tr>
<td>Nome do Cliente</td>
<td>##clienteNome##</td>
</tr>
<tr>
<td>Nome do Cliente</td>
<td>##clienteNome##</td>
</tr>
<tr>
<td>Número Contrato</td>
<td>##contrato##</td>
</tr>
<tr>
<td>Gestor de Conta</td>
<td>##gc##</td>
</tr>
<tr>
<td>Nome do Cliente</td>
<td>##clienteNome##</td>
</tr>
<tr>
<td>Nome do Cliente</td>
<td>##clienteNome##</td>
</tr>
<tr>
<td>Número Contrato</td>
<td>##contrato##</td>
</tr>
<tr>
<td>Gestor de Conta</td>
<td>##gc##</td>
</tr>
<tr>
<td>Nome do Cliente</td>
<td>##clienteNome##</td>
</tr>
<tr>
<td>Nome do Cliente</td>
<td>##clienteNome##</td>
</tr>
</tbody>
</table>
</div>
<div class="col-sm-8">
<div class="col-sm-12 marginVert12">
<a class="btn btn-single btn-success pull-right" ng-click="startEditing()" ng-class="editing ? 'disabled' : ''"><i class="fa-file-o"></i> Novo Template</a>
</div>
<table class="table table-striped table-bordered table-hover" id="tblTemplates">
<thead>
<tr>
<th>Nome</th>
<th>Ações</th>
</tr>
</thead>
<tbody>
<tr>
<td>Rodapé</td>
<td><button class="btn btn-single btn-orange" ng-click="footerEditing()" ng-class="editing ? 'disabled' : ''"><i class="fa-edit"></i> Editar</button></td>
</tr>
<tr>
<td>Carta Apresentação</td>
<td>
<button class="btn btn-single btn-info pull-left" ng-class="editing ? 'disabled' : ''"><i class="fa-file-pdf-o"></i> Ver em PDF</button>
<button class="btn btn-single btn-orange pull-left" ng-click="cartaEditing()" ng-class="editing ? 'disabled' : ''"><i class="fa-edit"></i> Editar</button>
<button class="btn btn-single btn-danger pull-left" ng-class="editing ? 'disabled' : ''"><i class="fa-remove"></i> Remover</button>
</td>
</tr>
</tbody>
</table>
</div>

Answer 1

This is how you want to arrange them:
<div class="container">
<div class="row">
<div class="col-sm-8">
<div class="row">
<div class="col-sm-12"></div>
<div class="col-sm-12"></div>
</div>
</div>
<div class="col-sm-4"></div>
</div>
</div>
Your col-sm-8's content should go in the above's col-sm-12s