Question

我正在使用Bootstrap 3.x，我有两个col-lg-6 div。第X列和第Y列。

在桌面视图中，列X位于左侧，列Y位于右侧。

如何获得它，以便在较小的屏幕宽度上，列Y 堆叠在列X上？

Answer 1

我认为您可以将列Y放在第X列之前，然后使用pull-right或pull-left进行浮动。看看下面的片段。

＆＃13;

@media all and (max-width: 1000px) {
  .mobile .col-y {
    float: left !important;
  }
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container desktop">
  <div class="col-xs-6 col-y pull-right">Y</div>
  <div class="col-xs-6">X</div>
</div>

<div class="container mobile">
  <div class="col-xs-6 col-y pull-right">Y</div>
  <div class="col-xs-6">X</div>
</div>

＆＃13;

您也可以仅使用媒体查询，而无需使用pull-right。它取决于你，两种变体都是正确的。我使用了col-xs-6，因为预览窗口较小，您应该自定义。

Answer 2

非常简单：

按照您想要的方式对其进行编码。

先，是的， X秒。

<?xml version="1.0" encoding="utf-8" ?> <resources> <dimen name="detail_backdrop_height">258dp</dimen> <dimen name="card_margin">16dp</dimen> <dimen name="fab_margin">16dp</dimen> <dimen name="list_item_avatar_size">40dp</dimen> </resources>用于移动设备屏幕，.col-xs-*用于更大的屏幕

在X和Y上使用.col-sm-*，以便在移动设备屏幕上将Y叠加在X之上。
使用.col-xs-12将X和Y放在一行中以获得更大的屏幕。
并使X：.col-sm-6和Y：.pull-left拥有X-Y，左右更大的scren

.pull-right

Answer 3

对于我们这些在 Bootstrap 4(+) 天通过 Google 搜索登陆这里的人来说，就像我一样，现在的做法是使用一系列“订单”类。

文档here

这是一个例子：

<div class="col-md-6 order-1 order-lg-0">
    <!-- at mobile I'm second -->
</div>

<div class="col-md-6 order-0 order-lg-1">
    <!-- at mobile I'm first -->
</div>

注意：这是移动优先的设计标准，因此如果您将订单设置为较小的尺寸，它将适用于较大的订单，除非被覆盖，因此需要“order-lg-<#>

如何仅在移动视图中将元素放在另一个元素上？

3 个答案: