How to manage agile flow

Question

I create a responsive site and place a callout style window located in the upper right corner of the main text. When the window is narrower, I want the leader to appear full width below the main text, but not above.

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

Answer 1

Use css multimedia 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 CSS for screen sizes of 360 pixels or lower.

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

This applies for screen sizes above 360 ​​pixels.

If text wrapping is required, but try the following: http://codepen.io/anon/pen/KlmIF