-1

I am currently trying to re-order these elements on resize for mobile devices as currently they are as following:
DESKTOP:
http://puu.sh/nwFhQ/2ec567f7be.jpg

{image}{paragraph}

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

{paragraph} {image}

<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>

I wish for all the images to be above the paragraph of content on the second row. Is there any correct method to achieve this?

{image} {paragraph}

Cheers

danopz
  • 3,310
  • 5
  • 31
  • 42
user3054199
  • 1
  • 1
  • Maybe you are just looking for sth like `col-xs-12`? Maybe you are looking for `col-xs-pull-6` like here: http://stackoverflow.com/questions/21933664/bootstrap-3-push-pull-columns-only-on-smaller-screen-sizes – crackmigg Mar 06 '16 at 10:41
  • @migg Thank you! Problem resolved. – user3054199 Mar 06 '16 at 10:51

1 Answers1

0

Fixed thanks to 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>
user3054199
  • 1
  • 1