CSS and test alignment after picture thumbnail

Here is my fiddle.

As you can see here:

My issue is that I would always like the text to be below the thumbnail not to the right. On the desktop site it is fine but on the mobile site the shorter titles appear on the right of the picture. Below is my relevant CSS, with all code on my fiddle. How do I go about doing this elegantly, avoiding !important and other taboo things if possible. But to be honest I am so frustrated at this point I just want it fixed...

h2 {
    color: #191A1E;
    font-family: Open Sans,Arial,sans-serif !important;
    font-size: 21px;
}

.su-post-meta {display:none;}

.su-post-title a {
    margin-top: 15px !important;
    float: left;
    color: #191A1E;
}

.su-posts-default-loop .su-post-thumbnail {
    float: left;
    display: block;
    margin-right: 1em;
}

.su-posts-default-loop .su-post-thumbnail img {
    max-width: 225px;
    max-height: 152px;
}
.su-posts-default-loop h2.su-post-title {
    clear: none;
    margin: 0 0 0.3em 0;
    font-size: 1.2em;
    font-weight: bold;
}
.su-posts-default-loop .su-post-meta {
    margin-bottom: 0.7em;
    font-size: 0.8em;
    opacity: 0.6;
    filter: alpha(opacity=60);
}
.su-posts-teaser-loop .su-post:after {
    content: '';
    display: table;
    clear: both;
}