Bootstrap-如何将图片放在文字上方，而不是在移动设备上并排放置？

Question

I'm helping out a friend with a website -- a customized version of Start Bootstrap's Grayscale theme -- and I am having problems getting one section to look right on mobile.

The section is set up so there is an image that is left-aligned, and then there is text to the right of it. It works fine at regular size, but on certain mobile devices only a few words of text will appear to the right of the image. This makes it look incredibly awkward. It would make much more sense to just have the image centered above the text when viewed on a mobile device.

I have been playing around with this for a few hours now and still cannot figure out how to do this. I'm guessing it's something related to Bootstrap's grid system, but I can't get it to work right in the scheme of the template.

Here's my JSFiddle link.

And the HTML code:

<section class="container content-section text-center" id="about">
<div class="about-section">
    <div class="col-lg-8 col-lg-offset-2">
        <h2>About Me</h2>
        <p><img align="left" alt="Rev. Derek in Library" hspace="20px" src="http://mnreverend.com/dev2/img/revderekborder.jpg" style="width:216px;height:285px;" vspace="20px">Lorem ipsum dolor sit amet, consectetur adipiscing 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 in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing 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 in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
</div>

Answer 1

This ultimately isn't a Bootstrap specific issue (in my opinion), it's just CSS. You can use a media query to change the position of the img at the viewport size you feel is appropriate.

You can change the display property to block and remove the float (left in this case) of the image inside a media-query so the image will be above the first paragraph on smaller devices.

*Also, align is deprecated, use CSS instead: See Alignment W3C

.profile-img {
  float: left;
  margin: 7.5px 5px 2.5px;
  width: 216px;
  height: 285px;
}

@media (max-width: 600px) {
  .profile-img {
    display: block;
    float: none;
    margin: 7.5px auto 30px;
  }
}

Working Example:

 body { width: 100%; height: 100%; font-family: "Lora", "Helvetica Neue", Helvetica, Arial, sans-serif; color: white; background-color: black; } html { width: 100%; height: 100%; } h1, h2, h3, h4, h5, h6 { margin: 0 0 35px; text-transform: uppercase; font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 700; letter-spacing: 1px; } p { margin: 0 0 25px; font-size: 18px; line-height: 1.5; } @media (min-width: 768px) { p { margin: 0 0 35px; font-size: 20px; line-height: 1.6; } } a { color: #42DCA3; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } a:hover, a:focus { text-decoration: none; color: #1d9b6c; } .light { font-weight: 400; } .navbar-custom { margin-bottom: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.3); text-transform: uppercase; font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif; background-color: black; } .navbar-custom .navbar-toggle { color: white; background-color: rgba(255, 255, 255, 0.2); font-size: 12px; } .navbar-custom .navbar-toggle:focus, .navbar-custom .navbar-toggle:active { outline: none; } .navbar-custom .navbar-brand { font-weight: 700; } .navbar-custom .navbar-brand:focus { outline: none; } .navbar-custom a { color: white; } .navbar-custom .nav li a { -webkit-transition: background 0.3s ease-in-out; -moz-transition: background 0.3s ease-in-out; transition: background 0.3s ease-in-out; } .navbar-custom .nav li a:hover { color: rgba(255, 255, 255, 0.8); outline: none; background-color: transparent; } .navbar-custom .nav li a:focus, .navbar-custom .nav li a:active { outline: none; background-color: transparent; } .navbar-custom .nav li.active { outline: none; } .navbar-custom .nav li.active a { background-color: rgba(255, 255, 255, 0.3); } .navbar-custom .nav li.active a:hover { color: white; } @media (min-width: 768px) { .navbar-custom { padding: 20px 0; border-bottom: none; letter-spacing: 1px; background: transparent; -webkit-transition: background 0.5s ease-in-out, padding 0.5s ease-in-out; -moz-transition: background 0.5s ease-in-out, padding 0.5s ease-in-out; transition: background 0.5s ease-in-out, padding 0.5s ease-in-out; } .navbar-custom.top-nav-collapse { padding: 0; background: black; border-bottom: 1px solid rgba(255, 255, 255, 0.3); } } .intro { display: table; width: 100%; height: auto; padding: 100px 0; text-align: center; color: white; background: url(../img/thekiss.jpg) no-repeat bottom center scroll; background-color: black; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; -o-background-size: cover; } .intro .intro-body { display: table-cell; vertical-align: middle; } .intro .intro-body .brand-heading { font-size: 40px; } .intro .intro-body .intro-text { font-size: 18px; } @media (min-width: 768px) { .intro { height: 100%; padding: 0; } .intro .intro-body .brand-heading { font-size: 100px; } .intro .intro-body .intro-text { font-size: 26px; } } .btn-circle { width: 70px; height: 70px; margin-top: 15px; padding: 7px 16px; border: 2px solid white; border-radius: 100% !important; font-size: 40px; color: white; background: transparent; -webkit-transition: background 0.3s ease-in-out; -moz-transition: background 0.3s ease-in-out; transition: background 0.3s ease-in-out; } .btn-circle:hover, .btn-circle:focus { outline: none; color: white; background: rgba(255, 255, 255, 0.1); } .btn-circle i.animated { -webkit-transition-property: -webkit-transform; -webkit-transition-duration: 1s; -moz-transition-property: -moz-transform; -moz-transition-duration: 1s; } .btn-circle:hover i.animated { -webkit-animation-name: pulse; -moz-animation-name: pulse; -webkit-animation-duration: 1.5s; -moz-animation-duration: 1.5s; -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; -moz-animation-timing-function: linear; } @-webkit-keyframes pulse { 0 { -webkit-transform: scale(1); transform: scale(1); } 50% { -webkit-transform: scale(1.2); transform: scale(1.2); } 100% { -webkit-transform: scale(1); transform: scale(1); } } @-moz-keyframes pulse { 0 { -moz-transform: scale(1); transform: scale(1); } 50% { -moz-transform: scale(1.2); transform: scale(1.2); } 100% { -moz-transform: scale(1); transform: scale(1); } } .content-section { padding-top: 100px; } .yourwedding-section { width: 100%; padding-left: 20px; padding-right: 20px; color: white; background-color: black; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; -o-background-size: cover; } #reviews { padding-left: 15px; padding-right: 15px; } #services { padding-left: 20px; padding-right: 20px; } #contact { padding-left: 15px; padding-right: 15px; } #map { width: 100%; height: 200px; margin-top: 100px; } .btn { text-transform: uppercase; font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; border-radius: 0; } .btn-default { border: 1px solid #42DCA3; color: #42DCA3; background-color: transparent; } .btn-default:hover, .btn-default:focus { border: 1px solid #42DCA3; outline: none; color: black; background-color: #42DCA3; } ul.banner-social-buttons { margin-top: 0; } @media (max-width: 1199px) { ul.banner-social-buttons { margin-top: 15px; } } @media (max-width: 767px) { ul.banner-social-buttons li { display: block; margin-bottom: 20px; padding: 0; } ul.banner-social-buttons li:last-child { margin-bottom: 0; } } footer { padding: 50px 0; } footer p { margin: 0; } ::-moz-selection { text-shadow: none; background: #fcfcfc; background: rgba(255, 255, 255, 0.2); } ::selection { text-shadow: none; background: #fcfcfc; background: rgba(255, 255, 255, 0.2); } img::selection { background: transparent; } img::-moz-selection { background: transparent; } body { webkit-tap-highlight-color: rgba(255, 255, 255, 0.2); } section#contact .form-group textarea.form-control { height: 236px } section#contact .form-group input.form-control { height: auto } section#contact .form-group input, section#contact .form-group textarea { padding: 20px } .profile-img { float: left; margin: 7.5px 5px 2.5px; width: 216px; height: 285px; } @media (max-width: 600px) { .profile-img { display: block; float: none; margin: 7.5px auto 15px; } } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> <section class="container content-section text-center" id="about"> <div class="about-section"> <div class="col-lg-8 col-lg-offset-2"> <h2>About Me</h2> <p> <img alt="Rev. Derek in Library" src="http://mnreverend.com/dev2/img/revderekborder.jpg" class="profile-img">Lorem ipsum dolor sit amet, consectetur adipiscing 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 in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing 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 in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> </div> </div> </section> 

Answer 2

You could achieve this result by a simple change to the markup by having the image and the text next to it in 2 separate columns like the example below. I have them side by side by using col-lg-6 and col-md-6 on large and medium screens but have the image and the text occupy all 12 columns on smaller screens with col-sm-12

 body{ margin: 0; padding: 0; } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> <section class="container content-section text-center" id="about"> <div class="about-section"> <div class="row"> <div class="col-lg-6 col-md-6 col-sm-12"> <img src="http://mnreverend.com/dev2/img/revderekborder.jpg"> </div> <div class="col-lg-6 col-md-6 col-sm-12"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus voluptatem quia obcaecati repellat alias nemo aperiam libero deleniti similique! Molestiae tempora libero quasi laboriosam dolor. Dolores assumenda odio, illum expedita. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex optio maxime, soluta recusandae iure tempora nam hic laborum accusantium veritatis eveniet officia ratione magnam a dolorum et adipisci quia, facere.</p> </div> </div> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi dolor dolores fugiat perferendis quae rem nihil iure assumenda voluptatem dolore vel veniam, cum temporibus! Eaque odit illum quisquam quod voluptas. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit quaerat id sequi quas explicabo quos vero facere, beatae incidunt fuga nobis repellendus mollitia porro magnam maxime fugiat dicta hic quam!</p> </div> </section>