Question

我目前正尝试在移动设备调整大小时重新订购这些元素，因为目前它们如下：
桌面：
http://puu.sh/nwFhQ/2ec567f7be.jpg

{图像} {段}

MOBILE：
http://puu.sh/nwFto/67ec6ef877.jpg

{}段 {图像}

<div class="row" id="showcase">
    <div class="col-md-6">
            <h1 class="text-center">
                h1. Lorem ipsum dolor sit amet.
            </h1>
        <p class="text-center">
            Lorem ipsum dolor sit amet, <strong>consectetur adipiscing lit</strong>. Aliquam eget sapien sapien. Curabitur in metus urna. In hac habitasse platea dictumst. Phasellus eu sem sapien, sed vestibulum velit. Nam purus nibh, lacinia non faucibus et, pharetra in dolor. Sed iaculis posuere diam ut cursus. <em>Morbi commodo sodales nisi id sodales. Proin consectetur, nisi id commodo imperdiet, metus nunc consequat lectus, id bibendum diam velit et dui.</em> Proin massa magna, vulputate nec bibendum nec, posuere nec lacus. <small>Aliquam mi erat, aliquam vel luctus eu, pharetra quis elit. Nulla euismod ultrices massa, et feugiat ipsum consequat eu.</small>
        </p>
    </div>
    <div class="col-md-6">
        <img alt="Bootstrap Image Preview" src="http://lorempixel.com/140/140/" />
    </div>
</div>

我希望所有图像都高于第二行的内容段落。有没有正确的方法来实现这个目标？

{图像} {段}

干杯

Answer 1

感谢Migg

<div class="row" id="showcase">
    <div class="**col-md-6 col-md-push-6**">
        <img alt="Bootstrap Image Preview" src="http://lorempixel.com/140/140/" />
    </div>

    <div class="**col-md-6 col-md-pull-6**">
        <h1 class="text-center">
            h1. Lorem ipsum dolor sit amet.
    </h1>
        <p class="text-center">
            Lorem ipsum dolor sit amet, <strong>consectetur adipiscing elit</strong>. Aliquam eget sapien sapien. Curabitur in metus urna. In hac habitasse platea dictumst. Phasellus eu sem sapien, sed vestibulum velit. Nam purus nibh, lacinia non faucibus et, pharetra in dolor. Sed iaculis posuere diam ut cursus. <em>Morbi commodo sodales nisi id sodales. Proin consectetur, nisi id commodo imperdiet, metus nunc consequat lectus, id bibendum diam velit et dui.</em> Proin massa magna, vulputate nec bibendum nec, posuere nec lacus. <small>Aliquam mi erat, aliquam vel luctus eu, pharetra quis elit. Nulla euismod ultrices massa, et feugiat ipsum consequat eu.</small>
        </p>
    </div>
</div>

如何在移动设备上更改div的顺序

1 个答案: