Bootstrap CSS — Медиа-право

Я пытаюсь реализовать загрузочный css - мне не нужен весь css, поэтому я просто скопировал некоторые css для определенных компонентов, таких как предупреждения и медиа-компонент.

Однако css с правами на медиа, похоже, не работает. У меня есть следующее:

<style> 
  .media,
  .media-body {
   overflow: hidden;
   zoom: 1;
  }
 .media, .media .media {
   margin-bottom: 15px;
   position: relative;
   padding: 20px;
   border: 1px solid #ddd;
 }
.media-body,
.media-left,
.media-right {
   display: table-cell;
   vertical-align: top;
}
.media-middle {
   vertical-align: middle;
}
.media-left,
.media > .pull-left {
   padding-right: 25px;
}            
.media-right, 
.media > .pull-right {
    padding-left: 25px;
}
.media-object {
    display: block;
}
.media-heading {
   margin-top: 0;
    margin-bottom: 5px;
}
.media-body p {
     margin: 10px 0px 10px 0px;
}

<div class = "media">
     <div class = "media-body">
        <h4 class = "media-heading">
            <a href = "#">Football</a> 
        </h4>
        <p>xyz</p>
     </div>                                                                                                                     
     <div class = "media-right" style = "width:200px">
        <img class = "media-object" src = "xyx" alt = "">
     </div>                                                         
</div>

Изображение находится справа от медиа-тела, но когда контента недостаточно, изображение выглядит так, как будто оно находится посередине.

Есть ли какой-то css, который мне не хватает, или как мне убедиться, что изображение находится справа, даже если контента нет?