css - 如何仅使用 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>