Tutorial #7 del curso de BootStrap 3.2, en este tutorial veremos como utilizar las clases extra del sistema de grillas utilizaremos visible para mostrar contenido de columnas deacuerdo a una resolución determinada y la clase hidden para hacer lo opuesto ocultar el contenido de una determinada columna según una determinada resolución.
Código:
<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <title>Grilla visible y oculto</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" type="text/css" href="css/bootstrap.css"> </head> <body> <div class="container"> <div class="row"> <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 well"> Contenido 1 </div> <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 well"> Contenido 2 </div> <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 visible-lg well"> contenido 3 es visible despúes de 1200px </div> </div> <div class="row"> <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 well"> Contenido 1 </div> <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 well"> Contenido 2 </div> <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 hidden-lg well"> contenido 3 es ocultado despúes de 1200px </div> </div> </div> <script src="js/jquery-1.11.1.min.js"></script> <script src="js/bootstrap.js"></script> </body> </html>