Media Queries and Floating/Breaking Spans

Question

span {
    display: block;
}

@media (min-width: 500px) {
    span {
        display: inline;
        float: right;
    }
}

<p>Some text. <span>Some occasionally-floated text.</span></p>

In this Fiddle, if the result window is larger than 500px both lines of text are on the same line.

When the window is resized smaller, the span breaks the line, but resizing the window larger again doesn't reverse the behavior. The line break remains and the span floats on the next line. Is this the correct behavior? And is there a way around it: a way that the span can become inline with the other text again?

Update: This is a bug in Webkit (and Blink?) https://bugs.webkit.org/show_bug.cgi?id=53166

Answer 1

As pointed out by @thirtydot in comment, this is a webkit bug, mor info in this question : Webkit float and display

To achieve the disired layout, you can do this :

FIDDLE

HTML:

<p><span class="left">Some text. </span><span class="right">Some occasionally-floated text.</span></p>

CSS:

.left{
    float:left;
}
.right {
    clear:left;
    float:left;
}

@media (min-width: 500px) {
    .right {
        float: right;
        clear:none;
    }
}