Mosaic Responsive

Mosaic Responsive

by gabouh075

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div class="container-fluid">
        <section id="init">
      <div class="row">
        <div id="mosaic">
          <div class="largeImg">
            <img src="http://lorempixel.com/600/600/food/">
          </div>
          <div class="smallImg">
            <div class="col-wrap">
              <div>
                <img src="http://lorempixel.com/300/200/food/">
              </div>
              <div>
                <img src="http://lorempixel.com/300/200/food/">
              </div>
              <div>
                <img src="http://lorempixel.com/300/200/food/">
              </div>
            </div>
            <div class="col-wrap">
              <div>
                <img src="http://lorempixel.com/300/200/food/">
              </div>
              <div>
                <img src="http://lorempixel.com/300/200/food/">
              </div>
              <div>
                <img src="http://lorempixel.com/300/200/food/">
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <footer>
      <section>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis eligendi a perferendis, quo temporibus illo, debitis.</p>
      </section>
    </footer>
    </div> 
    <!-- /container -->

CSS

#mosaic {
              width: 100%;
              background-color: aqua;
            }
            .largeImg, .smallImg {
              /*display: inline-block;*/
              float: left;
            }
            .largeImg {
              /*width: 40%;*/
              background-color: #165384;
            }
            .smallImg {
              /*width: 60%;*/
              background-color: #EF0808;
            }

            .col-wrap {
              display: inline-block;
            }