Bootstrap - Grundlegende Fragen zum Bewegen von Bildern für mobile und große Bildschirme

Question

Ich lerne immer noch die Grundlagen von Twitter-Bootstrap und ich fahre fort mit einem Website-Layout, das ich von Codeacademy übernommen habe. Meine Frage: Auf einem großen Bildschirm möchte ich, dass das Bild ganz rechts und zentriert mit dem Rest des Textes auf der linken Seite auf einem großen Bildschirm bewegt. Ich bin verwirrt darüber, warum meine Struktur nicht funktioniert, da ich das Bild zu einer neuen Div-Klasse hinzugefügt habe, aber in der gleichen Zeile, also sollte das nicht rechts vom Text im leeren Bereich platziert werden?

Neben dem Verschieben des Bildes auf dem großen Bildschirm, auf einem kleinen Bildschirm, ich möchte auch, dass es nur unter dem zweiten Absatz bewegen. Ich weiß nicht, ob das möglich ist; ist das etwas, was am besten mit dem versteckten sm-down-Dienstprogramm gemacht wird?

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

Dies ist, wie es jetzt aussieht vs, wie ich es aussehen soll (in blau):

http://imgur.com/HLqtK2s

Darüber hinaus gibt es etwas, das ich mit dem tun können Bild, um sicherzustellen, dass das Bild so klein skaliert wird, dass die gesamte Seite auf einem iPhone-Bildschirm angezeigt wird?

Answer 1

Sie nisten Ihre Spalten ... sollten Sie die <div class="col-* zu benachbarten divs bewegen ... wie 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>