Stack some floated elements on top of each other without wrapper - html

Question

I have a responsive site that contains some elements that have the float: left css. For smaller screens, I want to move the second element beneath the first one.
HTML:
<div>A</div>
<div>B</div>
<div>C</div>
CSS:
div {
float: left;
}
Picture: Above the red line is the current layout, below it the desired layout for smaller screens. The size or alignment of the divs does not need to change.
Can I achieve this effect without wrapping divs A and B in a new div?

Answer 1

UPDATED: You can use clear:left on the div B then use translate-Y to let the C div on top;
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

I'm not sure if you'd be interested in some jQuery, but let me provide a bit rough example, something like structural programming and could be surely cleaned up, but this allows you to add some classes and rearrange elements dynamically, without touching the HTML code at all.
<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"));
}
});
Check the demo on Codepen (the code is set to rearrange elements below 800px). You can check the jQuery documentation about .detach(), addClass() and other functions.
EDIT: Also, you should use media queries so these CSS classes would apply only on lower resolutions.