1

I'm still learning the basics of Twitter-bootstrap and I'm continuing with a website layout I adopted from Codeacademy. My question: On a large screen, I want the image to move to the far right and centered with the rest of the text to the left on a large screen. I'm a confused as to why my structure doesn't work since I added the image to a new div class but in the same row so shouldn't this put it to the right of the text in the blank space?

In addition to moving the image on the large screen, on a small screen, I would also like it to move just under the second paragraph. I don't know if this is possible; is this something best done by the hidden-sm-down utility? 

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
  <div class="row">
    <div class="about col-xs-12 col-lg-6">
      <h1>About Me</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</p>

      <div class="about col-xs-12 col-lg-6 pull-right hidden-sm-down">
        <img src="http://placehold.it/150x150" class="img-responsive img-circle" alt="" />
      </div>

      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor...
      </p>

      <blockquote class="blockquote-reverse">
        <h3>Lorem ipsum dolor sit amet consectetur adipisicing elit, sed do eiusmod tempor...</h3>
      </blockquote>

    </div>
  </div>
</div>

This is how it looks now vs how I want it to look (in blue):

https://i.stack.imgur.com/j9VcH.jpg

Furthermore, is there something I can do with the image to make sure the image scales to small enough that the entire page fits neatly on an iPhone screen?

vanburen
  • 21,502
  • 7
  • 28
  • 41
Ashley_L
  • 9
  • 5
  • To move the picture you may consider using some CSS like margin-left: 30em;. The following link may be what you are looking for to change the order of the columns http://stackoverflow.com/questions/20671303/bootstrap-3-changing-div-order-on-small-screens-only – GoMega54 Jul 04 '16 at 21:15

1 Answers1

0

You are nesting your columns... you should move the <div class="col-* to adjacent divs... like so:

<div class="container-fluid">
  <div class="row">
    <div class="about col-xs-12 col-lg-6">
      <h1>About Me</h1>
      ...
    </div>
    <div class="about col-xs-12 col-lg-6">
        <img src="..."/>
    </div>
  </div>
</div>