div 在大型设备上左右对齐，堆叠在小型设备上 [重复]答案

【问题标题】：div left and right-aligned on large devices, stacked on small [duplicate]div 在大型设备上左右对齐，堆叠在小型设备上 [重复]
【发布时间】：2016-04-26 17:27:33
【问题描述】：

有没有办法在不使用引导网格的情况下：

在更大的设备上

div.left 在 .header-wrapper 中左对齐
div.right 在 .header-wrapper 中右对齐

在小型设备上

将 div.left 和 div.right 堆叠在一起

JSfiddle

<div class="container">
  <div class="header-wrapper">

    <div class="left"> This is some longer text that may not fit in-line with buttons</div>
    <div class="right">
      <a type="button" class="btn btn-default">Table</a>
      <a type="button" class="btn btn-default">Charts</a>
    </div>
  </div>

  <p>Some content here</p>

  <div class="header-wrapper">
    <div class="in-line">
      This would be an inline example
    </div>
    <div class="in-line">
      Divs will stack without media queries
    </div>
  </div>
</div>

没有媒体查询可以吗？例如在 .left .right 上使用 inline-block 将负责堆叠。（参见 html 代码中的内联示例）

是否可以左/右对齐内联块 div？

【问题讨论】：

查看 CSS 媒体查询，这就是引导网格的作用；)
参考这个答案：stackoverflow.com/questions/6370690/…
是的 - 编写您自己的 CSS 和媒体查询。你基本上是通过写这个问题为这个过程编写了伪代码。
我知道我在这里重复每个人，但使用媒体查询。您可以在webdesignerwall.com/tutorials/… 找到教程。或者，您可以使用基础或 w3.css。您可以在w3schools.com 找到适合这些人的教程
将左/右列向左浮动，宽度为 50%。当您达到小屏幕宽度时，使用媒体查询将宽度设为 100%。

标签： css

【解决方案1】：

我可能不明白你在说什么，所以我使用了一个小 flexbox 和一个媒体查询，它看起来像 我认为你想要的。如果没有，请告诉我。顺便说一句，我曾经讨厌媒体查询，因为它的语法很奇怪而且闻起来很有趣，但我得出的结论是，它们在这里是有充分理由的。

http://jsfiddle.net/zer00ne/p7rbpuac/

变化

.header-wrapper {
  border: 1px solid green;
  display: flex;
  justify-content: space-between;
}

 @media screen and (max-width:360px) {
   .header-wrapper {

  display: flex;
  flex-direction: column;
  justify-content: center;
  }
 }

【讨论】：

【解决方案2】：

正如其他人所说，您需要使用媒体查询。

试试这个（显然可以根据自己的喜好更改尺寸）：

.header-wrapper { width: 100%; }
.header-wrapper > div { width: 200px; height: 50px; }
.left { background: blue; float: left; }
.right { background: red; float: right; }

@media screen and (max-width: 768px ) { 
   .right { 
      float:left; 
      clear: left; 
   } 
}

在小于 769 像素的屏幕上，带有 .right 类的框将应用 float: left;，这将导致它向左浮动。 clear: left; 将使其堆叠在具有类 .left 的 div 下方。

【讨论】：