html

<div class="block-spacer">
    <div class="row">
        <div class="col-xxs-12 col-xs-4 col-sm-4">
            <img class="responsive" src="http://lorempixel.com/g/360/200/abstract/8/360-200/" title="" alt=""/>

        </div>
        <div class="col-xxs-12 col-xs-8 col-sm-8">
            <h2>Überschrift</h2>
            <div>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
                <a href="#">mehr...</a>
            </div>
        </div>
    </div>
</div>

style

.ci-img-50-right {
    width: percentage(1 / 2);
    .pull-right;

    margin-bottom: @ci-spacer-md;
    margin-left: @ci-spacer-md;

    @media screen and (max-width: @screen-xs-max){
        margin-bottom: @ci-spacer-sm;
        margin-left: @ci-spacer-sm;
        width: 100%;
    }
}