Question

我的移动设备页面上有一个引导布局，如下所示：

[Title] [Image] [Description]

在桌面上我希望它如此显示：

[Image][Title] [Image][Description]

因此，来自移动设备的单个图像占据了屏幕的左侧，标题＆amp;描述堆叠在右侧的彼此之上。如果订单没有改变，我可以做到，但我想不出如何获得标题＆amp;描述堆叠在每个上面。我当前的布局将描述推送到新行。你如何创建这个配置？

Answer 1

简易解决方案： -

 <div class="row">
      <div class="col-sm-6">
        <img class="img-responsive" src="http://alto-live.s3.amazonaws.com/C39a2mvdXkhEsdxtqRWs55o4xGM/xw37B9xnyd1qi8ARMKz2jR_-A18/Photo/[2]/CRgx69es5Eeqfb2A35bWbg.jpg" alt="your image">
      </div>
      <div class="col-sm-6">
        <h3 class="text-center">Image Title</h3>
        <p class="text-center">Image desciption</p>
      </div>
    </div>

Answer 2

使用media queries和order：

＆＃13;

.container {
  margin: 0 0 40px;
}

.container:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

.container img {
  width: 200px;
}

.container .image {
  float: left;
}

@media (max-width: 600px) {
  .container {
    display: flex;
    flex-flow: column;
  }

  .container .image {
    order: 2;
  }

  .container .title {
    order: 1;
  }

  .container .description {
    order: 3;
  }
}

＆＃13;

<div class="container">
  <div class="image"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTmzMFjujgib4Md4MHoGD4VoIDwqjaG3DDrylUns_rY8dgSuybA" alt="" /></div>
  <div class="title">title</div>
  <div class="description">description</div>
</div>

＆＃13;

Answer 3

这是一个使用bootstrap的解决方案：Fiddle

<div class="row">
<div id="title" class="col-xs-12 col-sm-4 col-sm-push-4">
  TITLE
</div>
<div id="image" class="col-xs-12 col-sm-4 col-sm-pull-4">
  IMAGE
</div>
<div id="desc" class="col-xs-12 col-sm-4 col-sm-offset-4">
  Description
</div>

#title{
  background-color: #cd4578;
  height:30px;
}
#image{
  background-color: #666;
  height:60px;
}
#desc{
  background-color: #87de65;
  height:30px;
}
@media (min-width:768px) {
  #desc {
    margin-top:-30px;
  }
}

Answer 4

你可以保留一个div仅在移动设备中可见，这是代码：

    <div class="row">
    <div class="col-xs-12 visible-xs">
        <h3 class="text-center">Image Title</h3>
    </div>
    <div class="col-sm-6">
        <img class="img-responsive" src="http://alto-live.s3.amazonaws.com/C39a2mvdXkhEsdxtqRWs55o4xGM/xw37B9xnyd1qi8ARMKz2jR_-A18/Photo/[2]/CRgx69es5Eeqfb2A35bWbg.jpg"
            alt="your image">
    </div>
    <div class="col-sm-6">
        <h3 class="text-center hidden-xs">Image Title</h3>
        <p class="text-center">Image desciption</p>
    </div>
</div>

类'visible-xs'将使div仅在移动设备中可见，而'hidden-xs'类将使h3仅隐藏在移动设备中。

图像的Bootstrap顺序，标题＆amp;手机与桌面的说明

4 个答案: