Duda con posicionamiento absolute en rejilla de bootstrap

[Pelipe]

Hola mira justo ahora estoy en un proyecto con Bootstrap hace semanas y he tenido algunos sobresaltos pero es por no conocer el uso adecuado de bootstrap.

Mira flaco, no entiendo muy bien tu problema porque ciertos datos que no das tengo que adivinarlos (sisisi, ya se aveces tampoco es facil explicar un problema), he mirado un poco tu codigo, pero segun mi experiencia para lo que deseas(solo ordenar un poco las pestañas y parrafos), no es necesario meterse con los float ni position de CSS(no hay que tocar eso).

La solución que explicas te traerias problemas mas adelante porque estas tocando la estructura como tal de Bootstrap y esa no es una buena practica.

El CSS sería:

Código CSS:

<style>
    #cabecera_seccion{ 
        /*position: relative;*/
    }
    .caja_seccion{
        /*position: absolute;*/
        /*top: 0px;  */
    }
    .caja_seccion.oculta{
        visibility: hidden;
    }
    .caja_seccion.visible{
        visibility: visible;
    }
</style>
 

en HTML seria:

Código HTML:

<div class="container"><!-- "container" Espaciador con padding de 15px por lados derecho e izquierdo-->
    <div class="row"><!-- "row" usar siempre que se quiera separar como bloques y se respeten las columnas-->
    
        <!--################> Grupo de Pestañas 1-->
        <div class="well col-md-6"><!-- "well" es un clase con fondo plomo con borde redondeado ayuda ver las columnas con borde e idetificarlas, una vez que todo este bien borrar esta clase del div-->
        <ul class="nav nav-tabs"><!--menu tabs-->
            <li class="active"><a href="#">Descripción</a></li>
            <li ><a href="#">Más información</a></li>    
        </ul>
                <div id="cabecera_seccion"><!--contenedor descripcion-->
                    <div class="visible caja_seccion">
                        <div class="well col-md-7">Contenido 7 columnas</div>
                        <div class="well col-md-5">Contenido 5 columnas</div>
                    </div>              
                    <div class="oculta caja_seccion"><!--contenedor más informacion-->
                        <div class="well col-md-7">Contenido 7 columnas</div>
                        <div class="well imagen_seccion col-md-5">Contenido 5 columnas</div>
                    </div>
                </div>
        </div>
        
        <!--################> Grupo de Pestañas 2-->
        <div class="well col-md-6">
        <ul class="nav nav-tabs">
            <li class="active"><a href="#">Descripción</a></li>
            <li ><a href="#">Más información</a></li>    
        </ul>
                <div id="cabecera_seccion">
                    <div class="visible caja_seccion">
                        <div class="well col-md-7">Contenido 7 columnas</div>
                        <div class="well col-md-5">Contenido 5 columnas</div>
                    </div>              
                    <div class="oculta caja_seccion">
                        <div class="well col-md-7">Contenido 7 columnas</div>
                        <div class="well imagen_seccion col-md-5">Contenido 5 columnas</div>
                    </div>
                </div>
        </div>
        
    </div>
</div>
 

usa display no visibility:

Aqui hay un ejemplo a descargar acerca de tu caso:
http://ge.tt/54NwSvG1/v/0