Question

我有一个带有图像，标题和描述的堆叠col。在小屏幕（xs）上，我希望标题显示在图像上而不是下方。是否可以使用bs 3？

HTML

<div class="container"> 
  <div class="row"> 
    <div class="col-sm-12 col-xs-12 col-xs-push-12 red"> Image </div> 
    <div class="col-sm-12 col-xs-12 col-xs-pull-12 blue"> Title </div> 
    <div class="col-sm-12 green"> Description </div> 
  </div> 
</div>

CSS

.red { 
    background-color : red;
} 
.green { 
    background-color : green;
} 
.blue { 
    background-color : blue;
}

Answer 1

乍一看，你的问题似乎与Possible to achieve this Mobile/Desktop layout using Bootstrap? (or other grid)非常相似。但是，该解决方案（以及*-pull-和*-push-*类）仅在您要在一行中交换12列宽度的元素时才起作用。在您的情况下，您有两个元素，每个元素跨越12列，每个元素的宽度为100％。基于Swap DIV position with CSS only BS确实无法为您的情况提供解决方案。

您可use jQuery (javascript)或创建重复的红色行，并使用responsive-utilities隐藏/显示

Bootstrap 3 - 使用pull / push更改堆栈顺序？

1 个答案: