Question

我正在使用Bootstrap处理页面。在桌面上布局就像这样：

image - text
text - image
image text

当它崩溃到更窄的版本时，我（自然地）结束了：

image
text
text
image
image
text

如何让窄版看起来像这样？

image
text
image
text
image
text

我正在使用3行，每行有2列col-md-6。我可以在崩溃时更改列的顺序吗？

感谢。

Answer 1

您可以使用Bootstrap Column Ordering重新排序内容。见文档。

＆＃13;

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

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row red">
    <div class="col-md-6">
      <img src="http://placehold.it/350x150" class="img-responsive" alt="">
    </div>
    <div class="col-md-6">
      <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 class="row blue">
    <div class="col-md-6 col-md-push-6">
      <img src="http://placehold.it/350x150" class="img-responsive" alt="">
    </div>
    <div class="col-md-6 col-md-pull-6">
      <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 class="row red">
    <div class="col-md-6">
      <img src="http://placehold.it/350x150" class="img-responsive" alt="">
    </div>
    <div class="col-md-6">
      <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 class="row blue">
    <div class="col-md-6 col-md-push-6">
      <img src="http://placehold.it/350x150" class="img-responsive" alt="">
    </div>
    <div class="col-md-6 col-md-pull-6">
      <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>

＆＃13;

Answer 2

Bootstrap框架工作基本上是Mobile First所以对于窄版本或换句话说移动，要实现以下布局

image
text
image
text
image
text

网格系统必须先移动，col-xs-*

<div class="row">
    <div class="col-xs-12 col-sm-6">Image</div>
    <div class="col-xs-12 col-sm-6">Text</div>
</div>
<div class="row">
    <div class="col-xs-12 col-sm-6">Image</div>
    <div class="col-xs-12 col-sm-6">Text</div>
</div>
<div class="row">
    <div class="col-xs-12 col-sm-6">Image</div>
    <div class="col-xs-12 col-sm-6">Text</div>
</div>

现在在小型或中型设备上，您需要以下布局

image - text
text - image
image text

可以使用push and pull column ordering

来实现

<div class="row">
    <div class="col-xs-12 col-sm-6">Image</div>
    <div class="col-xs-12 col-sm-6">Text</div>
</div>
<div class="row">
    <div class="col-xs-12 col-sm-6 col-sm-push-6">Image</div>
    <div class="col-xs-12 col-sm-6 col-sm-pull-6">Text</div>
</div>
<div class="row">
    <div class="col-xs-12 col-sm-6">Image</div>
    <div class="col-xs-12 col-sm-6">Text</div>
</div>

Fiddle

引导列顺序

2 个答案: