Три адаптивных колонки с изображениями разного размера и колонкой с текстом

Три адаптивных колонки с изображениями разного размера и колонкой с текстом

by Dima Bagow

HTML

<body>
    <div class="wrapper">
    <div class="row">
       <div class="col-1-4">
       <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ3mSoZ4mQ8X3VsF_v-0cRZqOcnc1Y6KXXZg-2QiGefiNb4dIeH">
      </div>
      <div class="col-2-3">
    <img src="http://issahara.net/wp-content/uploads/2016/02/2.jpg">
      </div>
      <div class="col-1-4">
        <p>SALE</p>
       </div>
    </div><!-- /.row -->
    </div><!-- /.wrapper -->
</body>

CSS

.wrapper {
  margin: 0 auto;
  padding: 20px;
  max-width: 95%;
  background-color: #fff;
}

p {
  font-size: 5em;
  text-align: left;
  vertical-align: middle;
  margin: 0px;
}

.row {
  margin: 0 -10px;
  margin-bottom: 10px;
}

.row:last-child {
  margin-bottom: 0;
}

[class*="col-"] {
  padding: 10px;
}

@media all and ( min-width: 1024px) {
  .row {display: table;table-layout: fixed;width: 100%;}
  [class*="col-"] {display: table-cell;}
  /* set col widths */
  .col-2-3 {width: 60%;}
  .col-1-4 {width: 20%;}
  img {width:100%; height:500px;}
}

@media all and (min-width: 700px) {
  .row {display: table;table-layout: fixed;width: 100%;}
  [class*="col-"] {display: table-cell;}
  /* set col widths */
  .col-2-3 {width: 100%;}
  .col-1-4 {width: 100%;}
}