Change order of floated elements - html

Question

I have the following code of divs
div {
float: left;
width: 33.33%;
height: 50px;
}
#container {
width: 100%;
}
#title,
#image,
#descr {
display: inline-block;
}
#title,
#descr {
float: right;
}
#media only screen and (max-width: 480px) {
div {
width: 100%;
}
}
<div id="title">This is a title</div>
<div id="image">This is an image</div>
<div id="descr">This is a description</div>
What I want to do is, arrange the divs so that, on desktop, the image comes first, followed by the title and the description. Like so:
[This is an image] [This is a title] [This is a description]
However, when I float the title and description to right, the result I get is:
[This is an image] [This is a description] [This is a title]
Also, please not that while I can change the order of the divs in HTML to get the order I want, I want title to come first on mobile followed by image and description, hence, the order.
Edit: please note that the layout is made responsive by floating the divs. I'm looking for a workaround without removing the floats entirely.
jsfiddle

Answer 1

I would use flex to do this as it would be easier:
.container {
display: flex;
/* make things line up in a column */
flex-direction: column;
}
.container>div {
width: 100%;
height: 50px;
}
/* do mobile first and media query for larger */
#media only screen and (min-width: 481px) {
.container {
/* make things line up in a row */
flex-direction: row;
}
.container>div {
width: 33.33%;
}
#title {
order: 2;
}
#image {
order: 1;
}
#descr {
order: 3;
}
}
<div class="container">
<div id="title">This is a title</div>
<div id="image">This is an image</div>
<div id="descr">This is a description</div>
</div>

Answer 2

Float only the image and keep the other float:none.
Pay attention to whitespace between inline-block when removing the float
div {
width: 33.33%;
height: 50px;
}
#container {
width: 100%;
}
#title,
#image,
#descr {
display: inline-block;
}
#image {
float: left;
}
#media only screen and (max-width: 480px) {
div {
width: 100%;
}
}
<div id="title">This is a title</div><div id="image">This is an image</div><div id="descr">This is a description</div>

Answer 3

Use flexbox to change order of elements. Also floats not needed.
.container {
display: flex;
justify-content: space-between;
}
#title {
order: 2;
}
#image {
order: 1;
}
#descr {
order: 3;
}
#media only screen and (max-width: 480px) {
div {
width: 100%;
}
}
<div class="container">
<div id="title">This is a title</div>
<div id="image">This is an image</div>
<div id="descr">This is a description</div>
</div>

Answer 4

You have to change the order in the HTML code accordingly. If you float: right two elements, the first one will be far right, the next one left of it (if there is enough space)
div {
float: left;
width: 33.33%;
height: 50px;
}
#container {
width: 100%;
}
#title,
#image,
#descr {
display: inline-block;
}
#title,
#descr {
float: right;
}
#media only screen and (max-width: 480px) {
div {
width: 100%;
}
}
<div id="image">This is an image</div>
<div id="descr">This is a description</div>
<div id="title">This is a title</div>