Approach for CSS responsive layout

Question

Disclaimer: I am not a designer. I don't know enough about responsive CSS approaches. Go easy on me! I am a developer that is trying his hands to create an adoptive layout.

I'm using twitter bootstrap 3. Here is the layout I need in the Portrait mode:

And here is what it should change to in the Landscape mode:

And here is the "layout algorithm" I have in my mind:

• If the width of the screen is higher than 768px, use the landscape layout, split the screen into 2 (Applicable in landscape mode for phones and tablets)

• Else, if the height is greater than 400, use the portrait layout squeeze everything to fit.

• Else, display the landscape mode, but only the graph, with a button to present an overlay with the same options. (not included in the screenshot above.)

Now my questions:

• Can this be done using CSS alone? If so, how? (The buttons in the portrait mode move above and below the chart, and in landscape, distribute themselves evenly.)
• Otherwise, what is the best approach to use minimal javascript to achieve this responsive layout.

Answer 1

Demo http://www.bootply.com/104401

Create a CSS media query for the breakpoint between portrait and landscape (for example this is 480px on iPhone). This can be used to pull the pie chart to the right:

@media (min-width: 480px) {
    .push{float:right;}
}

Then another query to tell Bootstrap to stack the columns on portrait:

@media (max-width: 480px) {
    .breakpoint{width:100%;}
}

Use push and breakpoint classes accordingly as shown in the Bootply.

Answer 2

yes, you can use CSS3 media queries. check for device-width and device-height respectively.