Move Component Embedded Simulator next to its example

Summary:
Right now the embedded simulator is always at the top right corner.
This can be confusing as to what code is associated with the simulation.

So, move the simulator next to its actual code.

This has the added benefit of allowing us to use the React Native
Web Player for the simpler examples in the components.
Closes facebook#8384

Differential Revision: D3479056

Pulled By: bestander

fbshipit-source-id: f400d8387ec771b94d5e798c1e955b25f9a0f1bf

website/layout/AutodocsLayout.js

@@ -775,7 +775,7 @@ var EmbeddedSimulator = React.createClass({
       : <img alt="Run example in simulator" width="170" height="356" src="img/uiexplorer_main_ios.png" />;
 
     return (
-      <div className="column-left">
+      <div className="embedded-simulator">
         <p><a className="modal-button-open"><strong>Run this example</strong></a></p>
         <div className="modal-button-open modal-button-open-img">
           {imagePreview}
@@ -855,9 +855,12 @@ var Autodocs = React.createClass({
           path={example.path}
           metadata={metadata}
         />
-        <Prism>
-          {example.content.replace(/^[\s\S]*?\*\//, '').trim()}
-        </Prism>
+        <div className="example-container">
+          <Prism>
+           {example.content.replace(/^[\s\S]*?\*\//, '').trim()}
+          </Prism>
+          <EmbeddedSimulator shouldRender={metadata.runnable} metadata={metadata} />
+        </div>
       </div>
     );
   },
@@ -901,9 +904,6 @@ var Autodocs = React.createClass({
               {metadata.next && <a className="docs-next" href={'docs/' + metadata.next + '.html#content'}>Next &rarr;</a>}
             </div>
           </div>
-
-          <EmbeddedSimulator shouldRender={metadata.runnable} metadata={metadata} />
-
         </section>
       </Site>
     );

website/src/react-native/css/react-native.css

@@ -125,6 +125,33 @@ html * {
   rendering-intent: auto;
 }
 
+.example-container {
+  position: relative;
+}
+
+.embedded-simulator, .embedded-simulator * {
+  box-sizing: border-box;
+}
+
+.embedded-simulator p {
+  text-align: center;
+  color: #999;
+}
+
+.embedded-simulator {
+  width: 210px;
+  position: absolute;
+  right: -200px;
+  top: 0;
+}
+
+@media screen and (max-width: 680px) {
+  .embedded-simulator {
+    position: relative;
+    right: 0;
+  }
+}
+
 .prism {
   white-space: pre-wrap;
   font-family: 'source-code-pro', Menlo, 'Courier New', Consolas, monospace;
@@ -1027,21 +1054,6 @@ small code, li code, p code {
   text-decoration: none !important;
 }
 
-.column-left, .column-left * {
-  box-sizing: border-box;
-}
-
-.column-left p {
-  text-align: center;
-  color: #999;
-}
-
-.column-left {
-  float: left;
-  padding: 20px;
-  width: 210px;
-}
-
 /* Modal */
 .modal-backdrop {
   background: rgba(0,0,0,.4);