Question

我正在使用bootstrap，我想在屏幕更改为小屏幕时更改默认div位置。基本上是自助式div这样的位置。

但我想要这样的div。

我尝试过拉动和推动方法。但它不起作用。

感谢。

＆＃13;

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

＆＃13;

Answer 1

Bootstrap从小到大工作，请查看Grid system文档。因此，在您的情况下，如果要将所有div设置为全宽，请在任何地方使用col-xs-12类：

<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

（见下面我的编辑。首先是CSS方式，然后是BS4方式）

如果您正在使用v4 beta及其flexbox网格，则可以使用MQ中的order属性重新排列BootStrap网格的项目。

（负包括）-1值：将显示在其他之前（从最负面到-1，并且在标记中出现的顺序为相同的值
0（默认值）：无重新排列
（正面包括）1：将显示在其他之后（从1到最正面，并且在标记中出现的顺序为相同的值

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

在标记中，我按照您在XS中所需的顺序重新排列项目，并通过MQ重新排列小型和向上重新排列的图像以显示所有其他项目。如果您不想修改标记，则可以在最后一个段落上设置order: 1，并在小型和分辨率中将其覆盖为0。

编辑： 重新排序的BootStrap v4方式正在使用.order-N个类。 Documentation

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

@Melbin Mathai请检查以下代码，其中我为不同的屏幕添加了bootstrap类。我希望你期待同样的事情。

＆＃13;

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

＆＃13;

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>

如何更改bootstrap

4 个答案: