Bootstrap - Comment faire de habillage de texte autour d'une image sur de petits appareils?

Je suis juste de commencer avec Bootstrap. Ci-dessous est un aperçu de ma page.

Bootstrap - Comment faire de habillage de texte autour d'une image sur de petits appareils?

Mon CSS est

.snippet img{
width: 150px;
max-width: 100%;
height:auto;


 }

@media(max-width: 767px) {
.snippet img{

    width:100px;
    float: right;
    max-width: 100px;
    height: auto;
    margin-left: 10px;
    margin-right: 10px;
    }
}

Et voici mon code HTML:

<h2>About the venue</h2>
<div class="media-body snippet" >
    <a class="pull-right" href="venue.php">
            <img  src="images/venue.jpg" alt="illustration"></a>
    <p>this is the paragraph ... </p>       
</div>

Je veux que l'image soit suspendu comme ça sur grand écran. Cependant, sur de petits appareils, je voudrais obtenir le texte à enrouler autour de l'image. Comment puis-je le faire?

Toute aide serait appréciée!

OriginalL'auteur beginner | 2013-12-19