移动布局中的 Divs 顺序 - Bootstrap 4 行和列

Question

我正在尝试使用 Bootstrap 4 进行布局，但在移动设备上定位元素存在问题。也许这里有人可以帮助我，拜托:)

这是我想要的布局：

Image with layout

因此，正如您所见，它是用于桌面的 2 列布局和用于移动设备的 1 列布局。

为了创建这个布局，我创建了一行并制作了 2 列：

<div class="row">
    <div class="col-md-12 col-lg-8 col-12">
        <div id="productimage"></div>
        <div id="description"></div>
        <div id="reviews"></div>
    </div>
    <div class="col-md-12 col-lg-4 col-12">
        <div id="pricebook"></div>
        <div id="location"></div>
    </div>
</div>

所以，在桌面上这可以顺利运行。

但在移动设备上，我希望第 2 列中的 Price & Book div 实际上位于 Product Image div 的正下方。但是，它显然低于当前代码的评论 div。

那么，我该怎么做呢？

谢谢！

（我尝试将所有 div 设置为列，但是如果元素的高度不理想，那么桌面布局会中断，并且会发生这种情况，因为桌面上右列中的 div 可能具有不同的高度，具体取决于内容。我尝试将其分成更多行，但同样的问题）。

Answer 1

您也可以尝试创建一个重复的“Price & Book”div，它在桌面视图中保持隐藏状态，仅在移动视图中显示。原来的“Price & Book” div 应该只在桌面视图中可见。

Responsive utilities in Bootstrap