引导程序上的内容定位技巧

Question

请先检查此 HTML 模板Clippinghand

我的问题在于我们在下面提供的内容。有第一个图像，然后是帖子，下一个是第一个帖子，然后是我拍摄的 6 Element 图像。在计算机类型的设备上，一切都还好，但是当我要让它对移动或标签设备做出响应时，它会出现问题，问题是图像和内容越来越接近我只是总是想让它们成为帖子的顶部我的意思是我想要我的图片都在帖子的顶部，我该怎么做？有什么诀窍吗？另外，我如何仅使用一个自定义帖子来完成此部分？ Here is an example on image

Answer 1

您可以通过 Bootstrap 内置的Push + Pull 使用列排序。您必须重新排序您的内容才能实现这一点。这里也不错article。

基本上以相反的顺序堆叠列内容并应用推送和拉取类。 （*而不是内容 1，然后是内容 2，堆栈内容 2，然后是 col-md-6 中的内容 1）。查看工作示例，它将被说明。

.red {
  background: red;
}
.blue {
  background: lightblue;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<section id="our-services">
  <div class="container">
    <div class="row red">
      <div class="col-md-6">
        <div class="img-one">
          <img src="http://placehold.it/350x150" class="img-responsive" alt="">
        </div>
      </div>
      <div class="col-md-6">
        <div class="content-one">
          <h4>Background Remove</h4>
          <em>Price starts from $0.49</em>

          <p>This is the most demandable and most used image editing service all over the world for ecommerce product selling. Don’t worry, we make it easy to ensure all your images fit your ecommerce image editing guideline. We resize, crop, remove borders,
            and remove image background turning it to pure white, transparent or color background as per your guideline.</p>
        </div>
      </div>
    </div>
  </div>
  <div class="container">
    <div class="row blue">
      <div class="col-md-6 col-md-push-6">
        <div class="img-two">
          <img src="http://placehold.it/350x150" class="img-responsive" alt="">
        </div>
      </div>
      <div class="col-md-6 col-md-pull-6">
        <div class="content-two">
          <h4>Web-ready Images</h4>
          <em>Price starts from $1</em>

          <p>For web-shop owners, we introduce our additional delivery of web-ready images. Add the image specifications (like crop size 800×800 px ) and we will deliver web-ready image. We can fulfill the image size requirements for any ecommerce platform
            like Amazon, eBay, Shopify, bigcommerce, volusion, squarespace etc.</p>
        </div>
      </div>
    </div>
  </div>
  <div class="container">
    <div class="row red">
      <div class="col-md-6">
        <div class="img-three">
          <img src="http://placehold.it/350x150" class="img-responsive" alt="">
        </div>
      </div>
      <div class="col-md-6">
        <div class="content-three">
          <h4>Multiple Mask</h4>
          <em>Price starts from $2</em>

          <p>If you want to separate and modify different parts and features of the same product including its color, shape, and size, Multipath is the service you can take from us. We can deliver images with Alpha Channel, Layer Mask or Only Path.</p>
        </div>
      </div>
    </div>
  </div>
  <div class="container">
    <div class="row blue">
      <div class="col-md-6 col-md-push-6">
        <div class="img-four">
          <img src="http://placehold.it/350x150" class="img-responsive" alt="">
        </div>
      </div>
      <div class="col-md-6 col-md-pull-6">
        <div class="content-four">
          <h4>COLOR MATCHING</h4>
          <em>Price starts from $2</em>

          <p>You have many different color variations of the same product but do not want to spend time taking photos of each one of them? No worries! You don’t have to. We can change the color and size of the same product as per your instruction to save
            you from investing more of your time and money in taking photos.</p>
        </div>
      </div>
    </div>
  </div>
</section>
<!-- End of Our services area -->

Answer 2

看这里：http://jsfiddle.net/mwvfteuq/

简而言之，您需要将divs 按您希望它们出现在最小屏幕上的顺序放置。对于更广泛的设备，您可以将float 设置为left 或right（pull-left 和pull-right 在引导程序中）来自定义元素的连续位置。使用最小屏幕的媒体查询撤销这些属性。

例如：

HTML（使用引导程序）

<div class="row">
    <div class="col-sm-6 pull-right right">img</div>
    <div class="col-sm-6">some stuff</div>
</div>
<div class="row">
    <div class="col-sm-6">img</div>
    <div class="col-sm-6">some stuff</div>
</div>

CSS

@media (max-width: 768px) {
    div.right{
        float:none !important;
    }
}

不要忘记使用!important 覆盖引导程序pull-right 属性