<div class="card">
  <div class="image-block">
    <img class="image" src="https://c1.staticflickr.com/3/2540/32988640262_dcbc65a27c_h.jpg"/>
  </div>
  <div class="details-block">
    <h3 class="title"> 
      Fox
    </h3>
     <p class="submain">Kingdom: Animalia</p>  
    <p class="submain">Phylum: Chordata</p>  
    <p class="submain">Class: Mammalia</p>   
    <p class="submain">Order: Carnivora</p> 
    <p class="submain">Family: Canidae</p>
  </div>
  <div class="text-block">
  <p class="description">
    Foxes are small-to-medium-sized, omnivorous mammals belonging to several genera of the family Canidae. They have a flattened skull, upright triangular ears, a pointed, slightly upturned snout, and a long bushy tail (or brush).
    </p>
  </div>
</div>
.card{
  width: 90%;
  background-color: lightgray;
  margin: auto;
  border-radius: 20px;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.06);
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  height: 200px;
  max-width: 900px;
}


.image{
    text-align: left;
    width: 150px;
    height: 200px;
    border-radius: 20px 0 0 20px;
}

.image-block{
    text-align: left;
    width: 150px;
}

.details-block{
  text-align:left;
  flex: 0 0 50%;
  width: calc(100% - 190px);
  order: 1;
  padding: 0 20px;
}

.text-block{
  order: 1;
  width: calc(100% - 190px);
  padding: 0 20px;
}

.title, .description, .subtitle, .submain{
      font-family: 'Source Sans Pro', sans-serif;
}

.title{
  font-size: 22px;
}
.subtitle{
  font-size: 10px;
}

.submain{
  font-size: 10px;
  font-weigth: bold;
  display:inline-block;
}

.description{
  font-size: 12px;
}

@media (max-width: 900px) {
  .card{
    display: flex;
    flex-flow: row wrap;
    height: 400px;
  }
  
  .image{
    width: 150px;
    height: 200px;
    border-radius: 20px 0 0 0;
  }
  
  .image-block{
    flex: 1 auto;
    order: 1;
  }
  
  .details-block{
    order: 2;
    flex: 1 auto;
  }
  
  .text-block{
    order: 3;
    flex: auto;
  }
  
  .description{
      width: auto;
      padding: 0;
    font-size: 14px;
  }
  .submain{
    display: block;
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.