Make it possible to show figure in hero on the bottom on mobile

packages/website/ts/components/hero.tsx

@@ -17,6 +17,7 @@ interface Props {
     background?: React.ReactNode;
     announcement?: AnnouncementProps;
     sectionPadding?: string;
+    showFigureBottomMobile?: boolean;
 }
 
 interface SectionProps {
@@ -36,6 +37,7 @@ interface WrapProps {
     isCentered?: boolean;
     isFullWidth?: boolean;
     isCenteredMobile?: boolean;
+    showFigureBottomMobile?: boolean;
 }
 const Wrap = styled.div<WrapProps>`
     width: calc(100% - 60px);
@@ -52,6 +54,9 @@ const Wrap = styled.div<WrapProps>`
 
     @media (max-width: 768px) {
         text-align: ${props => (props.isCenteredMobile ? `center` : 'left')};
+        flex-direction: ${props => (props.showFigureBottomMobile ? 'column-reverse' : 'column')};
+        display: flex;
+        align-items: center;
     }
 `;
 
@@ -156,6 +161,7 @@ export class Hero extends React.Component<Props> {
                     isCentered={!props.figure}
                     isFullWidth={props.isFullWidth}
                     isCenteredMobile={props.isCenteredMobile}
+                    showFigureBottomMobile={props.showFigureBottomMobile}
                 >
                     {props.figure && <Content width="400px">{props.figure}</Content>}
 

packages/website/ts/pages/cfl.tsx

@@ -7,7 +7,7 @@ import { Definition } from 'ts/components/definition';
 import { DocumentTitle } from 'ts/components/document_title';
 import { Hero } from 'ts/components/hero';
 import { Icon, InlineIconWrap } from 'ts/components/icon';
-import { FlexWrap, Section } from 'ts/components/newLayout';
+import { Section } from 'ts/components/newLayout';
 import { SiteWrap } from 'ts/components/siteWrap';
 import { Heading, Paragraph } from 'ts/components/text';
 import { CodeStepper } from 'ts/pages/cfl/code_stepper';
@@ -84,16 +84,16 @@ export class CFL extends React.Component<Props> {
             <SiteWrap theme="dark">
                 <DocumentTitle {...documentConstants.CFL} />
                 <Hero
-                    title="Swap Tokens by tapping into 0x's networked liquidity pool"
+                    title="Swap Tokens by tapping into 0x's networked liquidity"
                     isLargeTitle={false}
                     isFullWidth={true}
                     description="Source liquidity for your DeFi users by filling orders at the best prices."
+                    showFigureBottomMobile={true}
                     figure={'TODO: LIQUIDITY DATA'}
                     actions={
                         <Button href={constants.CFL_DOCS} isInline={true}>
                             Get Started
-                        </Button>
-                    }
+                        </Button>}
                 />
                 <Section bgColor="dark" isTextCentered={true}>
                     <InlineIconWrap>

packages/website/ts/pages/cfl/code_stepper.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import styled from 'styled-components';
 
 import { Definition, DefinitionProps } from 'ts/components/definition';
-import { CodeTab, TabbedCodeDemo, TabbedWrapper } from 'ts/components/tabbed_code_demo';
+import { CodeTab, TabbedCodeDemo } from 'ts/components/tabbed_code_demo';
 
 const StepperContainer = styled.div`
     display: flex;