Question

I’m making a responsive site and have a callout style box floated to the top right of the main text. When the window is narrower I want the callout to appear full width below the main text, not above.

Here’s a code sample: http://codepen.io/creativetags/full/ydozx

Answer 1

Use css media queries.
First, move main-col above side-col. Then this in your .css file should give you control.

@media only screen and (max-width: 360px) {
.main-col {
float: none;
width: 100%;
}

.side-col {
float: none;
width: 100%;
background-color: silver;
}

This will apply the css for screen sizes that are 360px or below.

@media only screen and (min-width: 360px) {
.main-col {
float: left;
width: 83%;
}

.side-col {
float: left;
width: 17%;
background-color: silver;
}

This will apply for screen sizes above 360px.

If having the text wrap is a must though, then try this: http://codepen.io/anon/pen/KlmIF