如何使用bootstrap将图像拉到顶部以获得小尺寸？

Question

我有一个列有一点文字的列,然后在右边(任何大小),一个小图像.

在移动屏幕上,我想将小图片拉到顶部.我尝试了下面的bootstrap类的不同变体,我似乎无法拉/推,以便移动设备显示在移动设备上面的文字模糊的顶部

<div class="row">
    <div class="col-xs-12">
        <div class="row">
            <div class = "col-xs-12 col-xs-push-12 col-sm-9 col-sm-pull-9 text-right main-block">
                <div class = "col-xs-11 pull-right h1 quote">
                    Hey, look at this text!! 
                </div>
                <div class="col-xs-12 text-right attribute h2">-SOME MORE TEXT</div>
                <div class="col-xs-12 text-right attribute">TXT</div>
            </div>
            <div class="col-xs-12 col-xs-pull-12 col-sm-3 col-sm-push-3">
                <img class ="top-right-round parallel-corner" src="http://placehold.it/350x350">
            </div>
        </div>
    </div>
</div>

Answer 1

首先考虑移动!将图像移到文本上方.然后在较大的屏幕上,拉/推柱对齐.

<div class="row">
    <div class="col-xs-12 col-sm-3 col-sm-push-9">
        <img class="img-responsive" src="http://placehold.it/350x350" />
    </div>
    <div class="col-xs-12 col-sm-9 col-sm-pull-3">
        <div class="col-xs-12">Hey, look at this text!!</div>
        <div class="col-xs-12">SOME MORE TEXT</div>
        <div class="col-xs-12">TXT</div>
    </div>
</div>