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

-1

我目前正在重新排序的调整大小这些元素的移动设备，目前他们是如下：
桌面：
http://puu.sh/nwFhQ/2ec567f7be.jpg
如何更改div的顺序在移动设备上

{图片} {段}

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>

我希望所有的图像都在第二行的内容段落之上。有没有任何正确的方法来实现这一目标？

{}图像{ 款}

干杯

来源

2016-03-06 user3054199

也许你只是在寻找像'COL-XS-12'某事？也许你正在寻找像这样的col-xs-pull-6'：http://stackoverflow.com/questions/21933664/bootstrap-3-push-pull-columns-only-on-smaller-screen-sizes – migg

@ migg谢谢！问题已解决。 – user3054199

固定感谢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>

来源

2016-03-06 10:51:19 user3054199

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

回答

相关问题