-1

I'm learning web development and I'm trying to build a tribute page for freeCodeCamp assignment. You can see my full page here: https://codepen.io/Art365/pen/ZKxPQj Ideally what I want to happen with second row is this:

When viewport is large, image is on the left and text is to its right. When viewport is small, image is on the bottom and text is on top.

Here is the relevant code snippet:

<div class="row">

  <div class="col-lg-6 col-lg-push-6">
    <div class="text-content">
      <p>text content</p>
    </div>
  </div>

  <div class="col-lg-6 col-lg-pull-6">
    <img id="pic2" src="http://www.thefamouspeople.com/profiles/images/karl-landsteiner-3.jpg" alt="Landsteiner" />
  </div>

</div>

I realize that very similar questions have been asked here before and I have tried several proposed solutions utilizing pull-left and pull-right, like this one: https://stackoverflow.com/a/20171474/7143798 However, in my case, I can't seem to get the image on the left (in large view) unless I put it first in html. But if I put it first in html, it'll show up on top in small view.

Community
  • 1
  • 1
ArtemPetrov
  • 53
  • 4

2 Answers2

2

Since CodePen utilizes Bootstrap 4.0.0 you need to use .push-lg-6 and .pull-lg-6. Bootstrap 3 uses the .col-*-push-* classes.

Steven B.
  • 8,962
  • 3
  • 24
  • 45
0

No need for push and pull. You can do this just using breakpoints.

<div class="row">
     <div class="col-sm-12 col-md-6 col-lg-6"> Your image here </div>

     <div class="col-sm-12 col-md-6 col-lg-6">
     <p>Donec ullamcorper nulla non metus auctor fringilla. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.
     </p></div>
</div>
<div class="row">
     <div class="col-sm-12 col-md-6 col-lg-6"> Your image here </div>

     <div class="col-sm-12 col-md-6 col-lg-6">
     <p>Donec ullamcorper nulla non metus auctor fringilla. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.
     </p></div>
</div>

This will stack them side by side in LG and Medium breakpoints, and then break to full width columns to force top/bottom layout on small viewports. You wont need to include the XS breakpoint as col-xs-* is 12 column by default.

Korgrue
  • 3,430
  • 1
  • 13
  • 20
  • This won't work since he wants the image on bottom and text on top at smaller breakpoints. – Steven B. May 15 '17 at 21:58
  • Yeah, I tried this, but this means two images are together in small view, with no text in-between. Not ideal. – ArtemPetrov May 15 '17 at 22:00
  • It should fall like this using my code. Row Image text Row Image Text – Korgrue May 15 '17 at 22:02
  • I appreciate the effort, I tried it again, but for me it falls like this: text image image text. It seems like whatever column comes first in html will be on top by default. – ArtemPetrov May 15 '17 at 22:13