<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="css/estiloboot.css">
</head>
<body>
<div class="container-fluid">
<div class="row">
<header class="col-12 bg-info"><h1>Cabecera</h1></header>
</div>
<div class="row">
<aside class="col-sm-2 col-md-3 bg-success">
<ul>
<li>111111</li>
<li>111111</li>
<li>111111</li>
<li>111111</li>
</ul>
</aside>
<section class="col-sm-8 col-md-6 bg-info" id="contenido">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur asperiores esse illum qui. Ut laudantium fuga officia esse at harum pariatur dicta. Reprehenderit excepturi quibusdam fuga debitis eaque nemo adipisci!</p>
</section>
<aside class="col-sm-2 col-md-3 bg-danger">
<img src="img/baldosa.jpg" width="50">
</aside>
</div>
<div class="row">
<article class="col-md-3"><img src="img/baldosa.jpg" width="100"></article>
<article class="col-md-3"><img src="img/baldosa.jpg" width="100"></article>
<article class="col-md-3"><img src="img/baldosa.jpg" width="100"></article>
<article class="col-md-3"><img src="img/baldosa.jpg" width="100"></article>
<article class="col-md-3"><img src="img/baldosa.jpg" width="100"></article>
<article class="col-md-3"><img src="img/baldosa.jpg" width="100"></article>
<article class="col-md-3"><img src="img/baldosa.jpg" width="100"></article>
<article class="col-md-3"><img src="img/baldosa.jpg" width="100"></article>
<article class="col-md-3"><img src="img/baldosa.jpg" width="100"></article>
<article class="col-md-3"><img src="img/baldosa.jpg" width="100"></article>
<article class="col-md-3"><img src="img/baldosa.jpg" width="100"></article>
<article class="col-md-3"><img src="img/baldosa.jpg" width="100"></article>
</div>
<div class="row">
<footer class="col-12 bg-warning"><p>Esto es el pie</p></footer>
</div>
</div>
</body>
</html>
article{
background-color: paleturquoise;
border:1px solid black;
}
@media (max-width:576px){
#contenido{
order:-1;
}
}
