在没有包装的情况下将一些浮动元素堆叠在一起

Question

我有一个响应式网站，其中包含一些具有float: left css的元素。对于较小的屏幕，我想将第二个元素移动到第一个元素下面。

HTML：

<div>A</div>
<div>B</div>
<div>C</div>

CSS：

div {
    float: left;
}

图片：红线上方是当前布局，下方是较小屏幕所需的布局。 div的大小或对齐方式无需更改。

如果不将div A和​​B包装在新的div中，我能实现这种效果吗？

Answer 1

更新：您可以在div B上使用clear:left，然后使用translate-Y让C div位于顶部;

body {
  width: 100%;
  height: 100%;
  background-color: honeydew;  
}

div {
  display: inline-block;
  padding: 36px;  
}

#a {
  float: left;
  background-color: tomato;  
}

#b {  
  float: left;
  clear:left;
  background-color: gold;  
}

#c {  
  float: left;
  background-color: skyblue; 
  -webkit-transform: translateY(-100%);
  -ms-transform: translateY(-100%);
  transform: translateY(-100%);
}

<div id=a>1.</div>
<div id=b>2.</div>
<div id=c>3.</div>

Answer 2

我不确定你是否对某些 jQuery 感兴趣，但是让我提供一些粗略的例子，比如结构编程并且可以肯定地清理，但这允许您动态添加一些类和重新排列元素，而不需要触及HTML代码。

<div class="first">A</div>
<div class="second">B</div>
<div class="third">C</div>

<强> CSS：

.first {
  float: left;
  width: 100%;
}

.second {
  float: left;
  width: 100%;
}

.third {
  float: left;
  width: 100%;
}

#left-row {
  width: 50%;
  float: left;
}

.need-wrapper-right {
  width: 50%;
  float: right;
}

<强>的jQuery

jQuery(document).ready(function($) {

  if ($(window).width() < 800) {
    $(".second").detach().insertAfter(".first");
    $(".first").addClass("need-wrapper-left");
    $(".second").addClass("need-wrapper-left");
    $(".third").addClass("need-wrapper-right");
    $(".need-wrapper-left").wrapAll("<div id='left-row'>");
    $(".second").detach().insertAfter(".first");
    $(".third").insertAfter($("#left-row"));
  }

});

检查Codepen上的演示（代码设置为重新排列800px以下的元素）。您可以查看有关.detach（），addClass（）和其他函数的jQuery文档。

编辑：此外，您应该使用媒体查询，以便这些CSS类仅适用于较低分辨率。