Tema: Articulos y ASIDE ressponsive con CSS y Bootstrap
Ver Mensaje Individual
  #3 (permalink)  
Antiguo 06/05/2015, 12:31
Avatar de fede5426
fede5426
 
Fecha de Ingreso: diciembre-2014
Ubicación: Córdoba
Mensajes: 446
Antigüedad: 9 años, 5 meses
Puntos: 208
Respuesta: Articulos y ASIDE ressponsive con CSS y Bootstrap
Algo así seria lo que buscas?

Código HTML: 
Ver original
  1. <body>
  2.     <div class="container" id="contenedor">
  3.       <div class="row">
  4.         <div class="col-md-12" id="head"></div>
  5.       </div>
  6.       <div class="row">
  7.         <div class="col-md-8" id="principal">
  8.           <div class="row">
  9.             <div class="col-md-6">
  10.               <article>
  11.                 <h2>Titulo del articulo</h2>
  12.                 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum cupiditate, dignissimos quo. Dolore, omnis totam quibusdam voluptatibus cum, nulla dolores sunt iste? Sunt nam illum, animi magni veniam adipisci non.</p>
  13.               </article>
  14.             </div>
  15.             <div class="col-md-6">
  16.               <article>
  17.                 <h2>Titulo del articulo</h2>
  18.                 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum cupiditate, dignissimos quo. Dolore, omnis totam quibusdam voluptatibus cum, nulla dolores sunt iste? Sunt nam illum, animi magni veniam adipisci non.</p>
  19.               </article>
  20.             </div>
  21.             <div class="col-md-6">
  22.               <article>
  23.                 <h2>Titulo del articulo</h2>
  24.                 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum cupiditate, dignissimos quo. Dolore, omnis totam quibusdam voluptatibus cum, nulla dolores sunt iste? Sunt nam illum, animi magni veniam adipisci non.</p>
  25.               </article>
  26.             </div>
  27.             <div class="col-md-6">
  28.               <article>
  29.                 <h2>Titulo del articulo</h2>
  30.                 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum cupiditate, dignissimos quo. Dolore, omnis totam quibusdam voluptatibus cum, nulla dolores sunt iste? Sunt nam illum, animi magni veniam adipisci non.</p>
  31.               </article>
  32.             </div>
  33.             <div class="col-md-6">
  34.               <article>
  35.                 <h2>Titulo del articulo</h2>
  36.                 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum cupiditate, dignissimos quo. Dolore, omnis totam quibusdam voluptatibus cum, nulla dolores sunt iste? Sunt nam illum, animi magni veniam adipisci non.</p>
  37.               </article>
  38.             </div>
  39.             <div class="col-md-6">
  40.               <article>
  41.                 <h2>Titulo del articulo</h2>
  42.                 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum cupiditate, dignissimos quo. Dolore, omnis totam quibusdam voluptatibus cum, nulla dolores sunt iste? Sunt nam illum, animi magni veniam adipisci non.</p>
  43.               </article>
  44.             </div>
  45.             <div class="col-md-6">
  46.               <article>
  47.                 <h2>Titulo del articulo</h2>
  48.                 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum cupiditate, dignissimos quo. Dolore, omnis totam quibusdam voluptatibus cum, nulla dolores sunt iste? Sunt nam illum, animi magni veniam adipisci non.</p>
  49.               </article>
  50.             </div>
  51.             <div class="col-md-6">
  52.               <article>
  53.                 <h2>Titulo del articulo</h2>
  54.                 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum cupiditate, dignissimos quo. Dolore, omnis totam quibusdam voluptatibus cum, nulla dolores sunt iste? Sunt nam illum, animi magni veniam adipisci non.</p>
  55.               </article>
  56.             </div>
  57.           </div>
  58.         </div>
  59.         <div class="col-md-4" id="lateral">
  60.           <div class="row">
  61.             <div class="col-md-12" id="anuncios">
  62.               <aside>
  63.                 <h2>Anuncios</h2>
  64.                 <br>
  65.                 <h4>Titulo</h4>
  66.                 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi optio dignissimos nisi assumenda voluptas similique, esse, vel, fugiat rerum, natus neque perspiciatis accusamus error! Eaque, nobis, et! Reprehenderit, cumque, distinctio.</p>
  67.                 <br>
  68.                 <h4>Titulo</h4>
  69.                 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi optio dignissimos nisi assumenda voluptas similique, esse, vel, fugiat rerum, natus neque perspiciatis accusamus error! Eaque, nobis, et! Reprehenderit, cumque, distinctio.</p>
  70.               </aside>
  71.             </div>
  72.           </div>
  73.         </div>
  74.       </div>
  75.     </div>
  76. </body>

http://codepen.io/anon/pen/OVywQa

Agregué estilos extras como colores y paddings para que se visualicen mejor los elementos nada mas.

Claramente se ve que no soy experto en bootstrap, yo aplique lo entendido en cursos que estoy haciendo online nada más. Puede que no sea correcta la forma que te indico yo, pero tambien puede que si jaja

Seguramente alguien mas experimentado va a revisar mi código, de ahi veremos si lo aprueba o no