使用 bootstrap 3.3.7
。
下面链接中提供了所需的结构。问题是尽可能使用较少的 divs
来解决这种网格系统。
首先,我们有一个带有类别 col
的 div,它占用整个块。接下来,在大屏幕上,我们有另一个网格,也占用整个块。而在手机上,第一个网格将占用左侧,另一个网格将占用右侧。
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-md-3 col-xs-12">
<div class="col-md-12 col-sm-3 col-xs-3" style="border:1px solid;">
<span> here goes the image on the top
- on small device it should be to the left
</span>
</div>
<div class="col-md-12 col-sm-7 col-xs-8" style="border:1px solid;">
<span> here goes the content on the bottom that include some other grids
- on small device it should be to the right of the image above
</span>
</div>
</div>
<div class="col-md-3 col-md-offset-6 col-xs-12">
<div class="col-md-12 col-sm-3 col-xs-3" style="border:1px solid;">
<span>
*Second div*
here goes the image on the top
- on small device it should be to the left
</span>
</div>
<div class="col-md-12 col-sm-7 col-xs-8" style="border:1px solid;">
<span> here goes the content on the bottom that include some other grids
- on small device it should be to the right of the image above
</span>
</div>
</div>
</div>
col-
开头的元素包装在.row
中。 - zgood