For some reason, setting up breakpoints with a float rule doesn't seem to be applying when you change the width of your screen. Check out this simple example:
.left-content {
display: block;
margin: 30px auto;
width: 130px;
}
.right-content {
display: block;
margin: 30px;
margin: 30px auto;
width: 160px;
}
@media (min-width:750px) {
.left-content {
display: inline-block;
}
.right-content {
display: inline-block;
float: right;
}
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="container">
<div class="left-content">This is some text!</div>
<div class="right-content">
<button>Click me!</button>
<button>Click me 2!</button>
</div>
</div>
</body>
</html>When you first load this on a large screen, the buttons and text are correctly aligned. Once you make the screen smaller to the point the original rules are applied (IE display: block; is triggered), the buttons will not float correctly when expanding your screen.
Are floats broken when using responsive breakpoints?
(JSBin link so you can more easily test what I'm describing, seems the preview button is breaking the example snippet.)
Edit
This appears to only be broken in Google Chrome. Are there any resources on how to get this working, or should I rely on another technique to have these buttons be on the right?
I see what you are saying and I am not sure why this happens.
But to fix it, you can add a "float:left" to your "div.left-content" when the screen is less than 750px.