作者shinmoja (摩喳)
看板Web_Design
标题[问题] Bootstrap网页布局问题
时间Sun Dec 18 16:04:36 2016
各位前辈好，
最近初学Bootstrap，在网页上呈现的样式：
┌───┐ ┌───┐
│ 图片 │ │ 文字 │
└───┘ └───┘
┌───┐ ┌───┐ |
│ 文字 │ │ 图片 │ |----->图文变换位置
└───┘ └───┘ |
┌───┐ ┌───┐
│ 图片 │ │ 文字 │
└───┘ └───┘
手机端呈现：
┌───┐
│ 图片 │
└───┘
┌───┐
│ 文字 │
└───┘
┌───┐ |
│ 文字 │ |
└───┘ |-----> 这里想改顺序
┌───┐ |
│ 图片 │ |
└───┘ |
┌───┐
│ 图片 │
└───┘
┌───┐
│ 文字 │
└───┘
想请问一下，想让手机上看到的样式
┌───┐
│ 图片 │
└───┘
┌───┐
│ 文字 │
└───┘
┌───┐ |
│ 图片 │ |
└───┘ |-----> 变成这样子
┌───┐ |
│ 文字 │ |
└───┘ |
┌───┐
│ 图片 │
└───┘
┌───┐
│ 文字 │
└───┘
应该要如何修正才好？
[HTML如下]
<div id="">
<div class="">
<div class="row row-pb-md animate-box" style="padding-bottom:100px;">
<div class="col-md-6 col-md-push-6">
<div class="desc">
<h></h>
<p></p>
</div>
</div>
<div class="col-md-6 col-md-pull-6">
<img>
</div>
</div>
<div class="row row-pb-md animate-box" style="padding-bottom:100px;">
<div class="col-md-6 col-md-push-6">
<img>
</div>
<div class="col-md-6 col-md-pull-6">
<div class="desc">
<h></h>
<p></p>
</div>
</div>
</div>
</div>
</div>
再麻烦各位了，谢谢!!
--
※ 发信站: 批踢踢实业坊(ptt.cc), 来自: 1.161.144.213
※ 文章网址: https://webptt.com/cn.aspx?n=bbs/Web_Design/M.1482048282.A.0EE.html
2F：→ nottt: html结构一律都是先图後文，只利用push和pull调整PC版面 12/18 18:38
!!原来如此 谢谢no大的帮助
※ 编辑: shinmoja (1.161.144.213), 12/18/2016 22:31:42
3F：推 sa0124: 哇 好强 原来可以这样做 （笔记 12/19 16:28
4F：推 andy8050802: 酷 12/19 21:38