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:

![Portrait mode image](https://i.stack.imgur.com/lSmia.png)

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

![enter image description here](https://i.stack.imgur.com/0BYuQ.png)

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.