响应式改组div

Question

理想情况下，我想并排显示第1组和第2组，但如果浏览器窗口缩小，我希望第2组移到第1组以下。

我在div中包含文本/图像的文本中存在各种各样的问题，这些文本/图像在图像下方移动，只是一般奇怪的行为。

以这种方式包含所有这些东西的最佳方式是什么？

由于

Answer 1

最好的方法是使用div创建父display:flex并使用flex-direction:row更大的屏幕，然后为较小的屏幕创建断点并使用flex-direction:column

这是一个例子 -

<div class="parent">
  <div class="child-1"></div>
  <div class="child-2"></div>
</div>

这是CSS -

.parent {
  display:flex;
  flex-direction: row;
}

@media all and (min-width: 480px) and (max-width: 600px) {
  .parent {
    flex-direction: column;
  }
}
/*Feel Free to change the screen sizes here and add browser prefixes*/

这只是一个基本的例子。如果您使用新发布的 Bootstrap 4 测试版，则可以在很大程度上简化您的工作。您不必担心兼容性和浏览器前缀。

您可以在此处详细了解CSS Flex - https://css-tricks.com/snippets/css/a-guide-to-flexbox/