如何在引导程序中更改默认Div位置

Question

I am working with bootstrap and I would like to change default div positions when screen changes to small screen. Basically bootstrap div positions like this.

But I want divs like this.

I have tried pull and push method. But it doesn't work.

Thanks.

 <div class="col-sm-12"> <div class="col-sm-6"> <img src="http://loremflickr.com/320/240" /> </div> <div class="col-sm-6"> <h4> New here! </h4> <p> LoremFlickr is a service that provides free placeholder images for web and print. ... Photos come from Flickr and have a Creative Commons license. ... </p> </div> </div> <div class="col-sm-12"> <div class="col-sm-6"> <h4> New here! </h4> <p> LoremFlickr is a service that provides free placeholder images for web and print. ... Photos come from Flickr and have a Creative Commons license. ... </p> </div> <div class="col-sm-6"> <img src="http://loremflickr.com/320/240" /> </div> </div> 

Answer 1

Bootstrap works from small to big, check the Grid system documention. So in your case, if you want to set all the divs at full width, use the col-xs-12 class everywhere:

<div class="row">
    <div class="col-xs-12">
       ...image
    </div>
</div>
<div class="row">
    <div class="col-xs-12">
       second row
    </div>
</div>
...etc

Answer 2

(see below for my edit. First the CSS way, then the BS4 way)

If you're using v4 beta and its flexbox grid, you can use order property in a MQ to rearrange the items of the BootStrap grid.

• (negative including) -1 value: will display before others (from the most negative to -1 and for identical values in the order of appearance in markup
• 0 (which is the default): no rearrangement
• (positive including) 1 : will display after others (from 1 to the most positive and for identical values in the order of appearance in markup

Bootply with v4 beta: https://www.bootply.com/U4Koah4OcO

In markup, I rearranged items in the order you want in XS and via a MQ for small and up rearranged image to display after all other. If you don't want to modify your markup then you can set order: 1 on the last paragraph and override it to 0 in small and up resolutions.

EDIT: The BootStrap v4 way of reordering is using .order-N classes. Documentation

 @media (min-width: 576px) { .not-here-but-there { order: 1; outline: 3px dashed blue; } } 

 <!-- With BS v4 beta - <div class="container-fluid"> <div class="row"> <div class="col-sm-6"> <img src="http://loremflickr.com/320/240" /> </div> <div class="col-sm-6"> <h4> New here! </h4> <p> LoremFlickr is a service that provides free placeholder images for web and print. ... Photos come from Flickr and have a Creative Commons license. ... </p> </div> <div class="col-sm-6 not-here-but-there"> <img src="http://loremflickr.com/320/240" /> </div> <div class="col-sm-6"> <h4> New here! </h4> <p> LoremFlickr is a service that provides free placeholder images for web and print. ... Photos come from Flickr and have a Creative Commons license. ... </p> </div> </div> </div> 

Answer 3

@Melbin Mathai Please check following code, in which I have added bootstrap classes for different screens. I hope you were expecting the same.

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <div class="row"> <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 "> <img src="http://loremflickr.com/320/240" /> </div> <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 "> <h4> New here! </h4> <p> LoremFlickr is a service that provides free placeholder images for web and print. ... Photos come from Flickr and have a Creative Commons license. ... </p> </div> </div> <div class="row"> <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"> <h4> New here! </h4> <p> LoremFlickr is a service that provides free placeholder images for web and print. ... Photos come from Flickr and have a Creative Commons license. ... </p> </div> <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 "> <img src="http://loremflickr.com/320/240" /> </div> </div> 

Answer 4

Try this     
<div class="container">
       <div class="row">
         <div class="col-sm-12">
              <div class="col-sm-12 col-md-6">
                 <img src="https://loremflickr.com/320/240" />
             </div>
      <div class="col-sm-12 col-md-6">
        <h4>
          New here!
        </h4>
        <p>
          LoremFlickr is a service that provides free placeholder images for web and print. ... Photos come from Flickr and have a Creative Commons license. ...
        </p>
      </div>
      </div>
      <div class="col-sm-12">
     <div class="col-sm-12 col-md-6 col-md-push-6" >
       <img src="https://loremflickr.com/320/240" />
      </div>
      <div class="col-sm-12 col-md-6 col-md-pull-6">
        <h4>
          New here!
        </h4>
        <p>
          LoremFlickr is a service that provides free placeholder images for web and print. ... Photos come from Flickr and have a Creative Commons license. ...
        </p>
      </div>

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